Vue Router的常用API有哪些？

Vue Router 是 Vue 官方的路由管理库，提供了丰富的 API 用于处理路由配置、导航控制、参数传递等功能。以下是其常用 API 的分类整理：

一、路由配置相关

1. createRouter
   创建路由实例的核心函数，接收 history 和 routes 配置：

   import { createRouter, createWebHistory } from 'vue-router'
   const router = createRouter({history: createWebHistory(), // 路由模式routes: [/* 路由规则数组 */]
   })
   

2. createWebHistory / createWebHashHistory
   定义路由模式：

   • createWebHistory()：HTML5 History 模式（无 #，需服务端配置）
   • createWebHashHistory()：Hash 模式（带 #，无需服务端配置）

3. 路由规则配置（routes 数组元素）
   每个路由对象的常用属性：

   • path：路由路径（如 /home）
   • name：路由名称（用于命名路由跳转）
   • component：对应组件（如 Home）
   • children：嵌套路由（子路由配置）
   • props：是否将路由参数转为组件 props（true / 对象 / 函数）
   • meta：自定义元数据（如 { requiresAuth: true } 用于权限控制）

二、路由实例方法（router 实例）

1. router.push()
   导航到新路由（类似 window.location.href）：

   // 字符串路径
   router.push('/home')
   // 命名路由 + 参数
   router.push({ name: 'user', params: { id: 1 } })
   // 查询参数
   router.push({ path: '/search', query: { q: 'vue' } })
   

2. router.replace()
   导航到新路由，但不会向历史记录添加新条目（替换当前记录）：

   router.replace('/about')
   

3. router.go(n)
   操作历史记录（类似 window.history.go(n)）：

   router.go(1)  // 前进一页
   router.go(-1) // 后退一页
   

4. router.addRoute() / router.removeRoute()
   动态添加/删除路由：

   // 添加路由
   router.addRoute({ path: '/new', component: NewComponent })
   // 删除路由（通过名称）
   router.removeRoute('new')
   

三、组件内路由 API（useRouter / useRoute）

1. useRouter()
   在组件中获取路由实例（用于调用导航方法）：

   import { useRouter } from 'vue-router'
   const router = useRouter()
   const goHome = () => router.push('/home')
   

2. useRoute()
   在组件中获取当前路由信息对象（包含路径、参数等）：

   import { useRoute } from 'vue-router'
   const route = useRoute()
   // 当前路径
   console.log(route.path)
   // 路由参数（params）
   console.log(route.params.id)
   // 查询参数（query）
   console.log(route.query.q)
   // 元数据
   console.log(route.meta.requiresAuth)
   

四、导航守卫（路由拦截）

1. 全局守卫

   • router.beforeEach((to, from, next) => { ... })
     路由跳转前触发（常用于登录鉴权）：

     router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLogin) {next('/login') // 未登录则跳转到登录页} else {next() // 允许跳转}
     })
     

   • router.afterEach((to, from) => { ... })
     路由跳转后触发（常用于页面标题设置）。

2. 路由独享守卫
   在路由规则中定义 beforeEnter：

   {path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 仅对当前路由生效的拦截逻辑}
   }
   

3. 组件内守卫
   组件内定义的路由钩子：

   • beforeRouteEnter：进入组件前触发（此时组件实例未创建，无 this）
   • beforeRouteUpdate：组件复用（路由参数变化）时触发
   • beforeRouteLeave：离开组件前触发（常用于未保存数据提示）

五、路由视图与导航组件

1. <router-view>
   路由出口，用于渲染匹配的组件：

   <!-- 基础用法 -->
   <router-view />
   <!-- 命名视图（用于同时渲染多个组件） -->
   <router-view name="sidebar" />
   

2. <router-link>
   路由导航组件（生成 <a> 标签，避免页面刷新）：

   <!-- 基础用法 -->
   <router-link to="/home">首页</router-link>
   <!-- 命名路由 -->
   <router-link :to="{ name: 'user', params: { id: 1 } }">用户</router-link>
   <!-- 替换当前历史记录 -->
   <router-link to="/about" replace>关于</router-link>
   

六、其他常用 API

• router.resolve()：解析路由地址，返回路由信息对象。
• router.hasRoute()：检查路由是否存在（通过名称）。
• router.getRoutes()：获取所有路由记录的数组。
• scrollBehavior：路由跳转时的滚动行为配置（在 createRouter 中定义）。

七、history模式和hash模式有什么区别？

Vue Router 中的 history 模式和 hash 模式是两种不同的路由实现方式，主要区别体现在 URL 格式、底层原理、服务器配置等方面，具体如下：

1. URL 格式不同

• hash 模式（默认）：
  URL 中包含 # 符号，# 后面的部分为路由路径。例如：
  http://example.com/#/home、http://example.com/#/user/123
# 及其后面的内容不会被发送到服务器，仅用于客户端路由解析。

• history 模式：
  URL 中不包含 #，使用标准的 HTML5 History API 实现。例如：
  http://example.com/home、http://example.com/user/123
  看起来更接近传统的 URL，视觉上更友好。

2. 底层实现原理不同

• hash 模式：
  基于浏览器的 hashchange 事件实现。当 # 后面的路径变化时，浏览器不会重新请求页面，但会触发 hashchange 事件，Vue Router 监听该事件并切换对应组件。
  优点：兼容性好（支持所有现代浏览器及 IE8+），无需服务器配置。

• history 模式：
  基于 HTML5 的 history.pushState() 和 history.replaceState() 方法（属于 History API）。这些方法可以在不刷新页面的情况下修改浏览器历史记录，Vue Router 通过监听历史记录变化实现路由切换。
  优点：URL 更美观，符合用户对 URL 的直观认知。
  缺点：兼容性稍差（仅支持 IE10+），且需要服务器配合配置。

3. 服务器配置要求不同

• hash 模式：
  无需特殊配置。因为 # 后面的内容不会发送到服务器，无论访问 http://example.com/#/home 还是 http://example.com/#/user，服务器实际收到的请求都是 http://example.com/，只需返回单页应用的入口 HTML 即可。

• history 模式：
  必须配置服务器。因为当用户直接访问 http://example.com/user 时，浏览器会向服务器发送该路径的请求，若服务器未配置对应路由，会返回 404 错误。
  解决方法：服务器需将所有路由请求重定向到单页应用的入口 HTML（如 index.html）。
  示例配置（Nginx）：

  location / {try_files $uri $uri/ /index.html;
  }
  

4. 功能限制不同

• hash 模式：

  • # 后面的内容无法作为 HTTP 请求的一部分，因此不利于 SEO（搜索引擎可能忽略 # 后的内容）。
  • 不能使用 history.go(n) 等方法精确控制历史记录（但日常使用影响不大）。

• history 模式：

  • 支持 history.state 存储额外数据，可在路由跳转时传递更多信息。
  • 可以使用 popstate 事件监听历史记录变化，实现更灵活的导航控制。
  • URL 更利于 SEO 和分享（无 # 符号，更符合常规 URL 规范）。

5、如何选择？

• 若项目需要兼容旧浏览器（如 IE9 及以下），或不想配置服务器，选择 hash 模式。
• 若追求更美观的 URL、更好的 SEO 支持，且能配置服务器，选择 history 模式（推荐现代项目使用）。

6、模式切换方式

在创建路由实例时指定模式：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// hash 模式
const router = createRouter({history: createWebHashHistory(), // 使用 hash 模式routes: [...]
})// history 模式
const router = createRouter({history: createWebHistory(), // 使用 history 模式routes: [...]
})

总结：两种模式核心功能一致，但 history 模式在 URL 美观性和功能扩展性上更优，而 hash 模式在兼容性和部署便捷性上更有优势。