vue路由守卫的使用方法和应用场景

全局守卫

beforeEach中三个属性

router.beforeEach((to, from, next)=> { 

  if (!localStorage.getItem("token")) {

    if (to.path !== "/login") {

      return next("/login")

    }

  }

  next()

})

路由独享守卫 

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 在进入路由前执行的逻辑
      // 可以根据需要进行权限控制或其他验证
      // to: Route对象，即将要进入的目标路由对象
      // from: Route对象，当前导航正要离开的路由
      // next: 一个函数，用于 resolve 进行钩子。一定要调用该方法来 resolve 这个钩子。
      
      // 示例：假设需要管理员权限才能进入该路由
      const isAdmin = checkAdminPermission(); // 自定义函数，检查是否是管理员
      
      if (isAdmin) {
        next(); // 允许进入路由
      } else {
        next('/login'); // 如果不是管理员，则重定向到登录页面或其他页面
      }
    }
  },
  // 其他路由配置
];
 

组件内路由守卫

<template>

        <div>

                <h2>User</h2>

                <p>User ID: {{ $route.params.id }}</p>

        </div>

</template>

<script>

export default {

        data() {

                return { user: null };

},

beforeRouteEnter (to, from, next) {

// 在进入路由前调用

// 不能直接访问 `this`，因为组件实例尚未创建

// 可以通过 `next` 方法传入一个回调来访问组件实例

         next(vm => {

// 通过 `vm` 访问组件实例

        console.log(vm.$route.params.id);

// 访问路由参数 });

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用

        console.log('Component is being reused'); next(); },

        beforeRouteLeave (to, from, next) {

// 在离开当前路由时调用

        console.log('Leaving User component');

        next(); } };

</script>