首页 > 其他 > 详细

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

时间:2020-01-10 11:01:19      阅读:80      评论:0      收藏:0      [点我收藏+]

导航守卫

一、全局导航守卫

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
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!!!

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

原文:https://www.cnblogs.com/jinfeixiang/p/12175040.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!