组件内路由守卫

简介：

作用：给组件设置权限

beforeRouteEnter（to,from,next）{

　　通过路由规则，进入该组件时被调用

},

beforeRouteLeave（to,from,next）{

　　通过路由规则，离开该组件时被调用

},

操作：

主页面的Home组件：

<template>
  <div class="home">
    <h1>我是Home</h1>
  </div>
</template>

<script>
    
export default {
  name: "home",
  mounted() { },
      // 通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next) {
          if (to.meta.isAuth){
              // 如果本地存储的Nuber值为yang就跳转，反之弹出权限不够弹出权限不够
              if (localStorage.getItem('Nuber') === 'yang') {
                  next()
              } else{
                  alert('权限不够')
              }
          } else{
              next()
          }
      },
    // 通过路由规则，离开该组件时被调用 控制路由离开
    beforeRouteLeave(to,from,next){
        next()
    },

};
</script>

 

 如果不给 beforeRouteLeave 设置next（） 那么路由就不会进行跳转 ；可以进行判断不填写什么不让跳转路由

 beforeRouteLeave(to,from,next){
       
    },