组件内的路由和独享路由

路由组内的守卫

不光可以在路由跳转前后,设置守卫,也是可以在路由组件内定义路由的导航守卫的

export default {
  name: 'FontEnd',
  data() {
    return {
 
    }
  },
  // 通过路由规则,进入该组件时被调用
  beforeRouterEnter(to,from,next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
      // 在这里做一些逻辑的处理
      next(vm => {
        // 通过 `vm` 访问组件实例
      })
  },
 
  beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
  },
 
  // 通过路由规则,离开该组件时被调用
  // 针对单个组件做权限控制
  beforeRouteLeave(to,from,next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    // 放行
    next();
  }
}

独享路由守卫beforeEnter

const router = new VueRouter({
  routes: [
    {
        path: 'javascript',
        name: 'javaScript',
        hidden: true,
        component: () => import('@/views/fontend/javaScript.vue'),
        meta: {
        title: 'javaScript',
        icon: 'nested',
        },
        beforeEnter: (to, from, next) => {
        if(to.name == 'javaScript') {
            if(localStorage.getItem('role') === 'admin') {
                  next();
            }else {
                  alert("无权限查看");
            }
        }else {
            next();
        }  
      }
    },
  ]
})