路由导航守卫/路由拦截/导航守卫

导航守卫：

又称：路由导航守卫、路由拦截都是一样的

分为全局守卫、组件守卫、独享守卫

全局守卫

写在路由页面，写在const router同级之下

const router = new VueRouter({

  routes

})

//全局守卫写在这里

全局守卫又分为：前置守卫：router.beforeEach 和后置钩子：router.afterEach

前置守卫常用于登录验证：如下

//全局守卫
router.beforeEach((to,from,next)=>{
  //to到哪里去，from从哪里来，next执行下一步
  console.log(to,from,next)
// 要头部import store from '@/store/index'引入，这里才能取到的vue里面对应的数据和方法 
  // console.log(store)
 //如果vuex本地里没有关键字并且当前要去的不是login登录页面就跳到登录页。&&后面的条件防止死循环（本来就在login页但是还是一直跳转login登录页会造成死循环所以要＋判断条件）
  if(!store.state.isval && to.name!=='login'){
    next('/login')
    return
  }
  //如果本地有关键字并且还是登陆页面就跳转到主页。防止回退页面,重复登陆使用户体验不好
  if(store.state.isval&&to.name=='login'){
    next('/about')
    return

  }
  next() 
 
})

后置钩子没有next函数，自身也不会改变导航。

// 后置钩子函数:没有next
// 主要用于进了页面之后的操作，他自身不会接收next函数也不会改变导航本身
router.afterEach((to,from)=>{
  console.log(to,from)
//在实际应用中一般使用前置守卫，以下仅做展示效果
//如果vuex里没有关键字就弹一个提示框 
  if(!store.state.isval ){
  alert('请登录')
    return
  }
  
 
})

组件守卫：

写在要守卫的页面中，与data同级

分为：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter：路由进入前

beforeRouteUpdate：路由更新--------例：动态路由，页面没有改变但是路由改变

beforeRouteLeave：路由离开

示例：

export default {
    data() {
        return {};
    },
    created() {},
    methods: {},
    components:{},
    //组件守卫是在页面中定义的
    //路由进入前
    beforeRouteEnter(to,from,next){
      // console.log(to,from,next)
      

    },
    // //路由更新
    beforerouteUpdate(to,from,next){
     console.log(to,from,next)
 
    },
    //路由离开
    beforerouteLeave(to,from,next){

    }
};

独享守卫

写在要守护的路由中，与path同级

beforeEnter

  {
    path: '/about',
    name: 'About', 
    component: () => import(  '../views/About.vue'),
    // 独享守卫是在路由里面定义的
    beforeEnter: (to, from, next) => {
      console.log(to,from,next)
      next()
     
    }