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;