由vue-router模块控制，需要额外安装依赖。[参考官网](https://router.vuejs.org/) ```bash npm install vue-router --save ``` ## 组成 ### router-link 路由跳转，类似a标签，路由跳转作用 ```vue ``` ### router-view 路由视图，用于其他组件在该视图位置显示。 ```vue ``` ### Route ```js { path:'/url', name:'name', components:{ // one,two会绑定对应名称的路由视图上 default: ComponentZero, one:ComponentOne, two:ComponentTwo, }, meta: { transition: 'slide-right' }, // 路由元信息，可以通过router.meta获取指定元信息 component:ComponentZero, //在默认路由视图上跳转 redirect:'', // 重定向，也可详细描述route信息{path:'url'} children:[ // 嵌套路由 { path:'/url1', // 即/url/url1/的访问 component:ComponentOne, }, { path:'/url2', // 即/url/url2/的访问 component:ComponentTwo, } ], beforeEnter:(to, from) => { // 路由守卫，独享 // reject the navigation return false }, } ``` ### Router ```js { history:createWebHashHistory(), // history模式，hash式和非hash式 routes:routes,// 绑定路由集 strict: true, // 严格区分大小写，也可在单个路由配置 sensitive: true, // 不区分大小写，也可在单个路由配置 scrollBehavior (to, from, savedPosition) { //滚动行为 // return 期望滚动到哪个的位置 }, } ``` ## 匹配规则 * 自定义正则 * 可重复参数 * 大小写敏感控制 * 可选参数 ```js const routes = [ // 匹配 /o/3549 { path: '/o/:orderId' }, // 匹配 /p/books { path: '/p/:productName' }, // /:orderId -> 仅匹配数字 { path: '/:orderId(\\d+)' }, // /:productName -> 匹配其他任何内容 { path: '/:productName' }, // /:chapters -> 匹配 /one, /one/two, /one/two/three, 等,至少有一个参数，否则异常 { path: '/:chapters+' }, // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等 { path: '/:chapters*' }, // 匹配 /, /1, /1/2, 等 { path: '/:chapters(\\d+)*' }, // 将匹配 /users/posva 而非： // - /users/posva/ 当 strict: true // - /Users/posva 当 sensitive: true { path: '/users/:id', sensitive: true }, // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/ { path: '/users/:id?' }, // 匹配 /users 和 /users/posva { path: '/users/:userId?' }, // 匹配 /users 和 /users/42 { path: '/users/:userId(\\d+)?' }, ] ``` ## 配置&使用 1. 定义路由组件component 2. 定义路由集routes 3. 创建路由实例router 4. 选择history模式：hash(路径带#)和非hash 5. 挂载路由到app根 ```js // 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '

Home

' } const About = { template: '

About

' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ] // 3. 创建路由实例并传递 `routes` 配置 // 你可以在这里输入更多的配置，但我们在这里 // 暂时保持简单 // VueRouter : import { createRouter, createWebHistory } from 'vue-router' const router = VueRouter.createRouter({ // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 history: VueRouter.createWebHashHistory(), routes, // `routes: routes` 的缩写 }) // 5. 创建并挂载根实例 const app = Vue.createApp({}) //确保 _use_ 路由实例使 //整个应用支持路由。 app.use(router) app.mount('#app') // 现在，应用已经启动了！ ``` ### 动态路由 * 路径参数用`:`冒号修饰的， * 参数支持正则表达式匹配， * 代表可以传递动态数据到组件中，并且组件也可以读取参数。 * 通过`$router.param.var-name`接收`var-name`变量值 * 支持多个参数绑定和接收 ```js // 这些都会传递给 `createRouter` const routes = [ // 动态字段以冒号开始 { path: '/users/:id', component: User }, ] const User = { template: '

User {{ $route.params.id }}

', } ``` ### 嵌套路由即由children定义的子路由集。 ```js const routes = [ { path: '/user/:id', name: 'user-parent', component: User, children: [{ path: '', name: 'user', component: UserHome }], }, ] ``` ### 导航 * router-link元素方式 * router.push编程方式 * 替换方式：不会向history添加记录 ```js // // 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash，结果是 /about#team router.push({ path: '/about', hash: '#team' }) const username = 'eduardo' // 我们可以手动建立 url，但我们必须自己处理编码 router.push(`/user/${username}`) // -> /user/eduardo // 同样 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user ``` ```js // router.push({ path: '/home', replace: true }) // 相当于 router.replace({ path: '/home' }) ``` ### 命名路由即配置name属性的路由，导航时可绑定name属性。 ```js const routes = [ { path: '/user/:username', name: 'user', component: User, }, ] // User router.push({ name: 'user', params: { username: 'erina' } }) // 导航至 /user/erina ``` ### 命名视图即带有name属性路由视图，在路由导航时可通过命名在指定视图上导航 ```vue

``` ```js routes: [ { path: '/', components: { default: Home, // LeftSidebar: LeftSidebar 的缩写 LeftSidebar, // 它们与 `` 上的 `name` 属性匹配 RightSidebar, }, }, ], ``` ### 重定向和别名 * redirect重定向，分为绝对和相对 * alias 别名，可以单个，也可以多个 ```js const routes = [ { // 将总是把/users/123/posts重定向到/users/123/profile。 path: '/users/:id/posts', redirect: to => { // 该函数接收目标路由作为参数 // 相对位置不以`/`开头 // 或 { path: 'profile'} return 'profile' }, }, { path: '/home', redirect: { name: 'homepage' } }, // 绝对重定向 { path: '/user', component: Homepage, alias: ['/people', 'list'] } ] ``` ### 路由组件传参 * 若组件需要接收props参数值，则路由配置时需要声明props为true * 对于命名视图的路由，则需要针对每个命名视图都要声明props配置 ```js const routes = [ { path: '/user/:id', component: User, props: true }, { path: '/users/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] ``` ### 历史模式 * hash模式：createWebHashHistory()，路径带`#`修饰符 * H5模式：createWebHistory(),推荐使用 ## 路由守卫 * 全局守卫 * beforeEach 路由跳转前置处理处理 * beforeResolve 路由解析，导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用 * afterEach 路由跳转后置处理，可以分析，修改页面标题等 * 独享守卫 * beforeEnter 独享路由守卫，在配置路由时绑定，只在进入对应路由时触发 * 组件内守卫 * beforeRouteEnter 组件创建前调用，内部不能使用this * beforeRouteUpdate 组件更新时调用，一般对应动态路由时 * beforeRouteLeave 离开组件时调用 ```js const UserDetails = { template: `...`, beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！ // 因为当守卫执行时，组件实例还没被创建！ }, beforeRouteUpdate(to, from) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候， // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this` }, beforeRouteLeave(to, from) { // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this` }, } ``` ## 路由懒加载即仅在访问时初始化组件。 ```js {path:'url',component:() => import('./views/UserDetails.vue')} ``` ## 导航故障 * 等待导航结果 * 检测导航故障 * 鉴别导航故障 * aborted：导航守卫返回false被阻止 * cancelled：导航未完成之前又有新导航，如等待导航的过程中有调用了路由导航 * duplicated:已在目标位置，导航被阻止 * 检测重定向 ```js // 使用await同步修饰符等待导航结果 const navigationResult = await router.push('/my-profile') import { NavigationFailureType, isNavigationFailure } from 'vue-router' if(isNavigationFailure(failure, NavigationFailureType.aborted)){ // 检测导航故障类型 } ``` ## 动态路由 * createRouter 创建路由实例 * addRouter 未路由实例添加新动态路由及嵌套路由 ```js router.addRoute({ name: 'admin', path: '/admin', component: Admin }) router.addRoute('admin', { path: 'settings', component: AdminSettings }) ``` * removeRoute 删除路由 * 通过命名冲突覆盖方式删除旧路由 * 通过addRouter的回调方式删除 * 通过路由别名删除 ```js // 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的 router.addRoute({ path: '/other', name: 'about', component: Other }) const removeRoute = router.addRoute(routeRecord) removeRoute() // 删除路由如果存在的话 // 删除路由 router.removeRoute('about') ``` * hasRoute 查看路由是否存在 * getRoute 获取路由 ## 扩展RouterLink ```js ``` 如果使用渲染函数或创建 computed 属性，你可以使用 Composition API 中的 useLink ```js import { RouterLink, useLink } from 'vue-router' export default { name: 'AppLink', props: { // 如果使用 TypeScript，请添加 @ts-ignore ...RouterLink.props, inactiveClass: String, }, setup(props) { // `props` 包含 `to` 和任何其他可以传递给的 prop const { navigate, href, route, isActive, isExactActive } = useLink(props) // profit! return { isExternalLink } }, } ``` ```html ```