vue学习指南：第十四篇(详细) - Vue的路由第四篇 ( 路由的导航守卫 )

导航守卫

一、全局导航守卫

1. 全局导航守卫，把方法给 router，只要路由发生改变跳转都会触发这个函数

2. 每个路由都有一个 meta

3. 全局导航守卫分两种：

　　1. 全局前置导航守卫：路由还没有跳转之前

　　2. 全局后置导航守卫：路由跳转之后

　　3. to 和 from 都是 router

　　3.1 to 即将跳转的路由

　　3.2 from 跳转之后的路由

　　4. next 函数必须调用，不写所有的路由就没法跳转

4. 全局前置导航守卫：路由跳转前执行这个方法

router.beforeEach ((to, from, next)=> {

  next()

})

5. 全局后置导航守卫：路由跳转后会执行这个方法，它没有 next函数。路由跳转之后会执行这个方法

router.afterEach ((to, from) => {

  console.log("路由跳转后")

})

二、路由独享守卫

1. 某个路由独有的其它路由没有，只有进入某个路由，才会触发这个路由方法

三、组件类的守卫

一、 beforeRouteEnter

2. 当该组件对应的路由被渲染时会执行这个函数

注意：这个函数不能使用this关键字，因为组件化还没有实例

二、beforeRouteUpdate

1. 在当前路由发生改变且该组件被复用的时候

2. 这种现象只能发生在路由传参上，只有路由传参才会出现路由不同，组件被复用

三、beforeRouteLeave

导航离开该组件对应的路由会执行这个函数

作者：晋飞翔
手机号(微信同步)：17812718961
希望本篇文章能给正在学习前端的朋友或以及工作的朋友带来收获不喜勿喷如有建议多多提议谢谢！！！

巴特西