Vue Router

发表于 更新于 分类于 阅读次数：
本文字数： 2.6k 阅读时长 ≈ 2 分钟

基础

  • 动态路由匹配
    模式 匹配路径 $route.params
    /user/:username /user/evan { username: ‘evan’ }
    /user/:username/post/:post_id /user/evan/post/123 { username: ‘evan’, post_id: ‘123’ }
  • <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active
  • 通配符路由时
1
2
3
4
5
6
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
  • 编程式导航
声明式 编程式
<router-link :to=”…”> router.push(…)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如

1
2
3
4
5
6
7
8
9
10
11
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

1
2
3
4
5
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

:laughing: 同样的规则也适用于 router-link 组件的 to 属性。

  • router.replace(location, onComplete?, onAbort?)跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

  • Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致

  • 命名视图

  • 默认 default

  • 重定向 别名

redirect alias

  • 路由组件传参

  1. 布尔模式
     如果 props 被设置为 true，route.params 将会被设置为组件属性

  2. 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

  3. 函数模式

1
2
3
4
5
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

导航守卫

  • 全局前置守卫 router.beforeEach

  • 全局后置钩子 router.afterEach

1
2
3
router.afterEach((to, from) => {
  // ...全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
})

  • 路由独享的守卫 beforeEnter

  • 组件内的守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

  • beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

1
2
3
4
5
6
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
  // 注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了
}

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
0%