更多详细内容可查阅 VueRouter官方文档
1.在组件内可通过 this.$router
访问整个 路由器,也可以通过 this.$route
访问 当前路由
// Home.vue
export default {
computed: {
username() {
// this.$route 访问当前路由
return this.$route.params.username
}
},
methods: {
goBack() {
// this.$router 访问整个路由器对象
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}
2.动态路由中 可以设置多段 “路径参数”,对应的值都会设置到 $route.params
中
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan | { username: evan } |
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |
3.编程式导航中 提供了 path
,params
会被忽略
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
4.路由参数变化时,例如从 /user/foo
导航到 /user/bar
,原来的组件实例会被复用,此时如果想对参数的变化做出响应的话,可以简单地 watch(监测变化)$route
对象:
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}
6.组件的导航守卫中 beforeRouteEnter
守卫 不能 访问 this
,因为 守卫在导航确认前被调用,因此即将登场的新组件还没有被创建。
可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
7.完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。