Vue Router
(1)动态路由匹配
路由跳转传参
路由变化监听
多对一的路由-组件匹配
(2)嵌套路由
子路由的完整路径是当前路径加上所有父路由的嵌套路径
(3)编程式导航(操作History)
// 动态命名路径路由
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace
//路由替换:不向history 添加新记录
router.replace(location, onComplete?, onAbort?)
//路由历史跳转:向浏览器路由历史前进n(+)步,或者后退n(-)步
router.go(n)
进阶:
(1)命名路由,给路由增加name属性,在页面中可以通过路由名称跳转。
使用名字跳转好处是将页面与配置解耦,如果路由路径发生改变可以直接改配置文件中对应名称的路由路径,而无需到页面里去改路由跳转路径
router.push({ name: 'user', params: { userId: 123 } })
(2)路由组件传参:实现组件中 r o u t e 调用解耦如果希望组件中不使用 route调用解耦 如果希望组件中不使用 route调用解耦如果希望组件中不使用route,(将路由和组件解耦),可以通过路由组件设置prop属性将路由信息传入,在组件中以prop方式接收
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
(3)导航守卫
导航守卫按照路由导航过程分为三种:全局的,单个路由独享的,组件级别的
参数(params)和查询(query)的改变是不会触发导航守卫的,如果需要,可以通过监听$route对象或者使用beforeRouteUpdate组件内守卫
一般我们称的导航守卫是指全局前置导航守卫,局前置导航守卫(路由跳转拦截的钩子)接收三个参数
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
//案例:用户未能验证身份时重定向到 /login 的示例
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
全局解析守卫
通过router.beforeResolve 注册,该钩子在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后触发。
全局后置钩子
router.afterEach((to, from) => {
// ...
})
路由跳转后需要执行的操作
路由独享的守卫:可以在指定路由跳转前触发的钩子,详细注册看官网。
组件内的守卫:可以在组件内部注册的路由钩子,在组件创建前触发,因此不能调用this
(4)路由元信息:路由组件的meta字段被称为路由元信息,
如何访问?
首先,我们称呼 routes 配置中的每个路由对象为 路由记录。通过$route.matched 数组获得一个路由匹配到的所有路由记录(对于嵌套的路由的路由记录,包含了它和它所有父级路由记录,所以一个路由可以匹配多个路由记录)
实战操作:
1.route(路由信息对象)与router(路由实例)的区别
# this.$route拿路由信息对象,一般用于获取当前所在路由信息,一般常用的是获取该对象上的query、params、等属性
# this.$router路由实例,一般用于操作路由,提供了常规的路由操作api如:this.$router.push()/this.$router.go()/
this.$router.addRouter等路由路由跳转、编程式导航、动态添加路由等操作
总而言之,两者的区别一个是用于获取路由信息的,一个是用于操作路由的。