我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们
创建路由的步骤
- 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter);
- 定义 (路由) 组件,或者从其他地方import;
- 定义路由——每个路由应该映射一个组件;
- 创建 router 实例,然后传
routes
配置; - 创建和挂载根实例——通过router注入路由。
- 通过
this.$router
访问路由器 - 通过
this.$route
访问当前路由 this.$router
和router
使用起来完全一样<router-link>
对应的路由匹配成功,将自动设置 class 属性值.router-link-active
动态路由
需要把某种模式匹配到的所有路由,全都映射到同个组件。vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
- 动态路径参数以冒号开头——
{ path: '/user/:id', component: User }
; - 参数值会被设置到
this.$route.params
; - 多段路径——
/user/:username/post/:post_id
; - 还有
$route.query
(如果 URL 中有查询参数) 和$route.hash
;
响应路由参数变化
路由参数变化,原来的组件实例会被复用,这也意味着组件的生命周期钩子不会再被调用
解决:
1、可以简单地 watch (监测变化) $route
对象:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
2、beforeRouteUpdate 导航守卫
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// 响应路由变化...
// 记得调用 next()
}
}
捕获所有路由
- 常规参数只会匹配被
/
分隔的 URL 片段中的字符; - 匹配任意路径,使用通配符 (
*
); - 路由
{ path: '*' }
通常用于客户端 404 错误; path: '/user-*'
会匹配以/user-
开头的任意路径- 当使用一个通配符时,
$route.params
内会自动添加一个名为pathMatch
参数; - pathMatch 参数包含了 URL 通过通配符被匹配的部分;
匹配优先级
- 同一个路径可以匹配多个路由;
- 匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
嵌套路由
- 要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用
children
配置; - 以
/
开头的嵌套路径会被当作根路径; - 访问
/user/foo
时,User
是不会渲染任何东西,可提供一个空的子路由——{ path: '', component: xxx }
。