Vue中的导航守卫

全局守卫： 大门口的保安 router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截 router.afterEach((to,from)=>{}) //所有路由进来之后 : 了解 路由独享守卫：各个楼（每一个公司：前台） 每一个路径就是可以定义一个路由的独享守卫： 角色的判断（ A座是网易，B座是360 ） beforeEnter(to,from,next){} //守卫path 组件内部守卫：秘书 beforeRouteEnter(to,from,next){} //路由进来之前 无this beforeRouteUpdate(to,from,next){} //路由更新之前 beforeRouteLeave(to,from,next){} //路由离开之前 : 了解

1. 全局守卫

//1. 全局前置守卫 ，进来之前进行一个拦截判断
router.beforeEach((to, from, next) => { //和后端的中间件非常类似
  // console.log('已经拦截，页面实例是不会创建的')
  /*
    to:到哪去（要访问哪个页面）
    from:来自哪
  */
  // console.log(from,'from')
  // console.log(to, 'to')
  if (to.path == '/login') { //如果访问的是login，直接放行 无需验证
    next()
    return
  }
​
​
  //要判断是否登录 ，假设登录标识 username在locastorage中存储了
  if (!localStorage.getItem('username')) { //取反为真代表未登录
    next('/login') //未登录跳转到登录页面
    return
  }
​
  next() //往下走：往下渲染 : 到这就代表已经登录了
})
​
router.afterEach( ()=>{
    console.log('全局后置守卫')
} )

2.路由独享守卫：各个楼（每一个公司：前台）

{
      path: '/list',
      component: list,
      name: 'list11',//为路由起个名称
      meta: {
        // title:'列表',
        time: '2021-11-30'
      },
      //假设 黑钻会员 1、黄钻会员 2 、蓝钻会员 3、普通会员 0
      // beforeEnter:function(){}
      //2. 路由独享守卫 ，只有充钱才可以进
      beforeEnter(to,from,next){ 
          //to,from,next和全局守卫的一样
          if( localStorage.getItem('membertype') == '0' ){
            alert('请充值')
            next('/pay')
            return
          }
          next() //如果到这，代表其实有会员
​
      }
    },

3.组件守卫

• beforeRouteEnter 进来之前 list.vue

  beforeRouteEnter(to,from,next){
      //console.log('页面级的守卫',this) //比组件的生命周期还早，
      
      next(function(vm){
           console.log(vm,'这是this实例')
           vm.membertype = localStorage.getItem('membertype')
      })
  },
​

• beforeRouteUpdate 路由更新 detail.vue

  本页面的某个链接，还是跳转到本页面，然后还要拿到路径上的参数，再去请求ajax

<template>
  <div>
    <h4>获取id为：{{$route.params.id}}</h4>
    <h4>商品的type类型为：{{$route.params.type}}</h4>
​
    <hr />
    <h3>猜你喜欢</h3>
    <router-link to="/detail/22/华为">华为mate30</router-link>
    <hr />
    <router-link to="/detail/33/三星">三星</router-link>
  </div>
</template>
​
<script>
export default {
  created() {
    //1.获取到详情页所需要的参数，
    //2. 请求接口拿到具体的详情数据
    console.log(this.$route.params, "created 中触发并发送ajax请求");
  },
  //路由更新，触发此生命周期函数
  beforeRouteUpdate(to,from,next) {
    next()
    // console.log(this.$route.params, "路由更新了");
    console.log(to,'路由更新----')
    //请求接口拿到具体的详情数据
  },
  beforeRouteLeave(to,from,next){//路由离开之前  : 了解
      // console.log('离开本页面')
      next()
  } 
};
</script>
​
<style>
</style>