Vue守卫

全局导航守卫

• 是在做权限验证的时候会使用导航守卫
  。1.前置守卫

//单独设置每个路由的属性：
meta: { may: true }
router.beforeEach((to, from, next) => {
    if (to.matched.some(item => item.meta.may)) {
        let id = window.localStorage.getItem("id")
        if (id) {
            next()
        } else {
            next({ name: "login" })
        }
    } else {
        next()
    }
})

注意：next 方法必须要调用，否则钩子函数无法 resolved

• 后置钩子函数

router.afterEach((to,from) => {
	if(to.meta && to.meta.title){
		document.title = to.meta.title
	}else{
		document.title = "666"
	}
})

组件内守卫

// 不能获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
//写在组件里面
*** beforeRouteEnter(to,from,next){
 if(to.params.id<10) //如果数据里面的id小于10就表示有,就进入页面
    next() 登录
}else{
    next("/home")  返回首页
 }
}，

beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时触发
// 可以访问组件实例 `this`
     next() 只要改变触发就执行next()
 },
 
 beforeRouteLeave (to, from, next) {
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例 `this`
     next()
 }
//to是要到哪里去
 from是要从哪里来
 next就是成功就执行

路由独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      name:"foo"
      component: Foo,
      
      //它是在配置路由文件里面写 router/index.js
      beforeEnter: (to, from, next) => {
        // 只守卫当前的一条路由
      }
    }
  ]
})

全局守卫

• router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似

	const router = new VueRouter({ 
	  //里面是路由路径
   })
   const login=["order","my"]   //数组里面是要判断的路由的权限
   router.beforeEach((to,from,next)=>{
     if(login.includes(to.name)){  //权限     
     let userId=window.localStroage.getItem("userId") //只能存字符串
      if(userId){  //登录
        next()
          }else{  //没有登录
            next("/login")
          }
     }else
        next()
  })
   export default router;