Vue路由器提供的导航保护主要用于通过跳转或取消来保护导航
在路线导航过程中有许多嵌入的机会:全局、单一路线共享或组件级别
全球前线警卫:
导航触发时,全局前置导航守卫按顺序调用,守卫是异步进行的,此时导航在所有守卫 resolve 之前处于等待中
守卫接受的三个参数:
to : Route : 即将要进入的目标 路由对象
from : Route : 当前导航正要离开的路由
next : Function : 必须调用该方法来 resolve 这个钩子,执行效果依赖 next 方法的调用参数
next() : 进入管道中的下一个钩子,如果全部钩子执行完了,则导航的状态就是 confirmed
next(false) : 中断当前导航,如果浏览器URL变了,那么URL地址会重置到 from 路由对应的地址
next(‘/’) 或 next({path:’/’}) : 跳转到一个不同的地址。当前路由被中断,然后进行一个新的导航
next(error) : 导航被终止且错误会被传递给 router.onError() 注册过的回调
确保 next 在函数在任何给定的导航守卫中都只被严格的调用一次
全局解析守卫:
用 router.beforeResolve 注册一个全局解析守卫,和 router.beforeEach 的区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
全局后置钩子:
用 afterEach 注册全局后置钩子,但没有 next 函数,也不会改变导航本身
路由独享的守卫:
直接在路由配置中定义 beforeEnter 守卫
组件内的守卫:
beforeRouteEnter:不能获取组件实例 this ,但可以在 next 中通过一个回调访问组件实例
beforeRouteUpdate
beforeRouteLeave
完整的导航解析流程:
路由元信息
定义路由的时候可以配置meta字段:
我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象的 $route.matched 数组,因此,通过遍历 $route.matched 可以检查到路由记录中的 meta 字段
过渡动效
<router-view> 是基本的动态组件,所以我们可以使用 <transition> 组件给它添加一些过渡效果
单个路由的过渡:
如果想给单个路由设置一样的过渡效果,可以在各自组件内使用 <transition> 并设置不同的name
基于路由的动态过渡:
还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:
数据获取
进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据
导航完成之前获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
导航完成之后获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
(未完)