欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Vue路由守卫之路由独享守卫

时间:2021-01-15 11:14:36|栏目:vue|点击:

路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)

在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

参数如下:

beforeEnter(to,from,next)
// to  要进入的目标,路由对象
// from 当前导航正要离开的路由
// next 初步认为是展示页面;(是否显示跳转页面)
​
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

我们在这里使用使用一个案例来演示它的用法;案例中独立路由单独检测是否在登入状态,在没有登录的情况下弹到登录界面,和全局登录效果一致,只不过只保留了自己;

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
​
import Index from './Index/Index.vue'
​
import AA from './views/AA.vue'
import DD from './views/DD.vue'
import EE from './views/EE.vue'
export default {
  routes: [
    {
      path: '/',
      component: Index,
      name: 'index',
      children: [
        {
          path: 'AA',
          component: AA,
          name: 'aa',
          beforeEnter: (to, from, next) => {
            if (to.path == '/DD') {
              next()
            } else {
              alert('请登入');
              next('/DD')
            }
​
          }
        }, {
          path: 'DD',
          component: DD,
          name: 'dd'
        },
        {
          path: 'EE',
          component: EE,
          name: 'ee'
        },
​
      ]
    }
  ]
}

 

为大家附上源码地址https://gitee.com/web94/vueluyouduxiangshouwei

总结

上一篇:解决vue 子组件修改父组件传来的props值报错问题

栏    目:vue

下一篇:详解Vue 动态组件与全局事件绑定总结

本文标题:Vue路由守卫之路由独享守卫

本文地址:http://www.codeinn.net/misctech/45611.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有