路由进阶部分 – 导航守卫( 路由守卫 )
-
作用: — 类似 【保安】
- 守卫路由
- 进
- 举例: 携带数据进
- 出
- 举例: 事情完成才能出
- 进
- 守卫路由
-
导航守卫一共有三种形式
-
全局导航守卫
用的时候写在主文件中(main.js),全局的
- 全局前置守卫
router.beforeEach(fn)
- fn中有三个参数
//to:去往的目标点 //from:当前的木标点 //next:流程 当参数为false时 不可以进行跳转,为空或者true时才可以 router.beforeEach(( to , from , next )=>{ const name = localStorage.getItem('name') if( name || to.path === '/my'){ next() }else{ next('/my') } })
- 全局的解析守卫(不常用)
- 全局的后置守卫
router.afterEach(fn)
- 可以做一些用户友好提示
- 与全局前置守卫参数相同
- 全局前置守卫
-
路由独享守卫
beforeEnter(to,from,next)
- 写在路由表中的守卫钩子
- 针对的是和当前路由相关的,那么其他与之不相关的路由,它是无法监听它的变化情况的
- 可用于用户权限管理
- 与全局前置守卫参数相同
const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/category', component: Category, beforeEnter ( to,from,next ) { alert('您要进入吗') next() //业务: 用户权限管理 } }, { path: '**', redirect: '/error' } ]
-
组件内守卫
-
组件内的前置守卫
beforeRouteEnter((to,from,next)=>{})
- 导航进入组件时,调用
- 因为组件此时没有创建,所以没有this
- this是访问不到的,如果非要访问this ,必须通过 next(vm=>{})访问
- 案例: 数据预载(进入组件前就获得数据)
next(vm => { //vm指的就是组件 const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys vm.$set(vm.category,'categorys',result) })
-
组件内的后置守卫
- 离开组件时,调用
- this是可以访问到
beforeRouteLeave (to, from, next) { //我们现在已经要离开这个组件,那么这个组件身上的数据和方法等内容我们肯定可以获取到,也就是说这里可以使用 this if( this.username || this.password){ if( confirm('您已经填写结束了吗?')){ next() }else{ next(false) } }else{ next() } }
-
组件内的更新守卫( 路由传参和路由的接参 )
- 在当前路由改变,但是该组件被复用时调用
- 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
- 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
- 可以访问组件实例
this
beforeRouteUpdate ( to,from,next ) { //动态路由用 console.log('路由改变了') next() }
-
-
总结 路由导航守卫
- 3种类型 7个路由监听钩子
- 业务:
- 监听整个项目的路由变化情况
- 全局的前置守卫
- 监听某个路由的变化情况
- 路由的独享守卫
- 监听的路由组件的路由变化情况
- 组件内的导航守卫
- 监听整个项目的路由变化情况