vue路由安全守卫 （组件内路由守卫）

组件内部的路由守卫

• 基本形式：

export default {
    
    
  name: "Cart",
  beforeRouteEnter(to, from, next) {
    
    
    // 进入当前组件  当前组件不存在  this不存在
    //console.log(to,from);
    //如果想获取组件的实例
    //给next 添加一个匿名函数回调  形参vm 代表当前组件
    next((vm)=>{
    
    
    //   console.log(vm);
    //   vm等价this  指当前组件实例  可以操作当前组件的相关变量
    });
  },
  beforeRouteUpdate(to,from,next){
    
    
      // 在当前路由改变，但是该组件被复用时调用
      // 由于会渲染同样的组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
  beforeRouteLeave(to, from, next) {
    
    
    // 离开当前组件
    //console.log(this);
    next();
  },
};

• 举例说明
  index.js配置路由节点

// 配置的路由节点
import Home from '../views/Home'
export default[
  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    
    
    path:'/about',
    name:'About',
    component:About,
  }
]

Home.vue 子组件

<template>
  <div class="home">
      home页面
      <br>
      //about界面的跳转链接
      <router-link to="{path:./about">about</router-link>
  </div>
</template>
<script>
export default {
    
    
  name: 'Home',
  beforeRouteLeave(to, from, next) {
    
    
    // 离开当前组件
    console.log(this);
    console.log('qqq');
    next();
  },
}
</script>

About.vue 子组件

</template>
<script>
export default {
    
    
  name:'about',
  beforeRouteEnter(to, from, next) {
    
    
    //进入当前组件
    next((vm)=>{
    
    
     alert("没有登录,请继续登录！");
    })
  }
}
</script>
<style>
</style>

界面显示结果：
点击界面about链接：会在进去路由之前进行判断

在离开 / 路由 home界面 跳转到 /about路由时的结果显示：

全局守卫链接：
https://blog.csdn.net/weixin_47863547/article/details/119209310