Vue.js中的路由进阶(导航守卫( 路由守卫 ))
路由进阶部分 -- 导航守卫( 路由守卫 )
- 作用: --- 类似 【保安】
- 守卫路由
- 进
- 举例: 携带数据进
- 出
- 举例: 事情完成才能出
- 守卫路由
- 导航守卫一共有三种形式
- A: 全局导航守卫(放置在main.js文件里)
- 全局前置守卫
router.beforeEach(fn)
router.beforeEach((to,from,next) => { const name=localStorage.getItem('name'); if(name==='hqg' || to.path==='/login'){//如果name为真就true,为假就false next() }else{ next('/login') } })
- 全局的解析守卫
- 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
- 必须保证整个项目的守卫和异步路由组件解析完成
- 全局的后置守卫
- 可以做一些用户友好提示
router.afterEach( (to,from) => { //举例 if( to.path === '/reg'){ confirm('请确定要进入注册页吗?') } })
- 全局前置守卫
- B: 路由独享守卫(在index.js的路由表中写)
- 写在路由表中的守卫钩子
- 针对的是和当前路由相关的,那么其他与之不相关的路由,它是无法监听它的变化情况的
beforeEnter: (to,from,next) => { const name = localStorage.getItem('name') if( name || to.path === '/user'){ next() }else{ setTimeout( ()=> { alert('您还没有登录账号,3秒后自动跳转到登录页') next('/login') },3000) } }
- A: 全局导航守卫(放置在main.js文件里)
- C: 组件内守卫
- 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
- 导航进入组件时,调用
- this是访问不到的,如果非要访问this ,必须通过 next(vm=>{})访问
- 因为组件此时没有创建,所以没有this
- 案例: 数据预载(进入组件前就获得数据)
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){ if(this.username && this.password){ next() }else{ if(confirm('表单还没填完,你真的要离开吗?')){ next() }else{ next(false) } } }
- 当好离开组件时,调用
- this是可以访问到
- 组件内的更新守卫( 路由传参和路由的接参 )
- 在当前路由改变,但是该组件被复用时调用
- 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
- 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
- 可以访问组件实例
this
beforeRouteUpdate ( to,from,next ) { console.log('update') next() } }
- 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
- 功能: 导航守卫可以监听路由变化情况
- 名词
- 前置: 要进入当前路由 --- 老师进入教室前
- 后置: 要离开当前路由 --- 老师离开教室
- 关于next的使用
- next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
- next( false ) 表示不通过, 表示从当前路由跳转不到目标路由
- next('/login') 等价于 next({path:'/login'}) 跳转指定的路由
- next('/login') 等价于 next({path:'/login',params,query})
- next( fn ) 数据预载
- 业务: 当我们进入到一个项目的首页时,但是当我们没有注册账号时,它主动跳转到了注册/登录页
router.beforeEach((to,from,next)=>{ const name = localStorage.getItem('name') if( name || to.path === '/login' ){ //如果有 / --> /home next() }else{ next('/login') } })
- 业务: 当进入mine页面的时候, 要判断用户是否登录,如果没有登录,跳转登录页
beforeEnter: (to,from,next) => { const name = localStorage.getItem('name') if( name || to.path === 'user'){ next() }else{ setTimeout( ()=> { alert('您还没有登录账号,3秒后自动跳转到登录页') next('/login') },3000) } }
- 路由导航守卫
- 3中类型 7个路由监听钩子
- 业务:
- 监听整个项目的路由变化情况 全局的前置守卫
- 监听某个路由的变化情况 路由的独享守卫
- 监听的路由组件的路由变化情况 组件内的导航守卫
- 业务:
- 动效
- 路由懒加载
落花有意,红叶无情