黑马程序员技术交流社区

标题: 【上海校区】动手理解导航守卫（Vue） [打印本页]

作者: 不二晨 时间: 2018-8-7 16:38
标题: 【上海校区】动手理解导航守卫（Vue）
最近不是很忙，把自己不会的技术点看了一遍文档，然后动手敲了一下代码，加深自己理解。通过实战Demo，调试，结果分析，理解了官网的知识点。记录下来，第一是方便自己加深理解，第二是后续可以回顾，第三可以帮助像我这种小白的人一起学习。
导航就是我们说的路由，当路由发生变化的时候，我们想要做的事情，这就是导航守卫的重点。
路由改变的函数我们写到项目的哪个位置，代码写哪个地方，这个就是官网上说的（全局守卫，路由独享的守卫，组件内的守卫），下面一一介绍：
（一）全局守卫：
用来监测所有的路由，代码写在路由页面(router.js)

方法有：
router.beforeEach((to, from) => {  // ...})router.afterEach((to, from) => {  // ...})复制代码to,from,next三个参数都是必要的
to: 即将要进入的目标路由对象
from:  当前导航正要离开的路由
next：一定要调用该方法来 resolve 这个钩子，如果不写next()或者next(false)，页面路由不会跳转，也就是页面被阻止在当前页面了
to,from是一个对象，就是routes[] 数组里面配置的某个具体的路由对象，
比如：to.path,  to,name,  to.meta 等等
from.path,  from.name, from.meta  【path,name,meta】这些字段都是自己在路由里面定义的字段，这样就可以开始写逻辑了。

（二）路由独享守卫：

就是将路由钩子函数写在我们的某个具体路由对象里面：

这些守卫与全局前置守卫的方法参数是一样的,里面可以开始写逻辑。

（三）组件内的守卫：

我们写的vue页面，
常用方法：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

这些守卫与全局前置守卫的方法参数是一样的,里面可以开始写逻辑，注意点：beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

官网整个路由守卫被触发流程的步骤：

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

【转载】
链接：https://juejin.im/post/5b681397f265da0f6436eaf3

作者: 不二晨 时间: 2018-8-16 17:22
奈斯

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2