基础
- 动态路由匹配
模式 匹配路径 $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 | // 给出一个路由 { path: '/user-*' } |
- 编程式导航
声明式 | 编程式 |
---|---|
<router-link :to=”…”> | router.push(…) |
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如
1 | // 字符串 |
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path
1 | const userId = '123' |
:laughing: 同样的规则也适用于 router-link 组件的 to 属性。
router.replace(location, onComplete?, onAbort?)跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致
命名视图
默认 default
重定向 别名
redirect alias
- 路由组件传参
布尔模式
如果 props 被设置为 true,route.params 将会被设置为组件属性如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用
函数模式
1 | const router = new VueRouter({ |
导航守卫
全局前置守卫
router.beforeEach
全局后置钩子
router.afterEach
1 | router.afterEach((to, from) => { |
路由独享的守卫
beforeEnter
组件内的守卫
beforeRouteEnter
beforeRouteUpdate
(2.2 新增)beforeRouteLeave
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
1 | beforeRouteEnter (to, from, next) { |
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。