Vue-Router路由守卫详的细用法教程

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';
import Login from '@/components/Login';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About, meta: { requiresAuth: true } },
    { path: '/login', component: Login }
  ]
});

// 假设我们有一个检查用户是否登录的函数
function isUserLoggedIn() {
  // 这里可以是一个实际的登录检查逻辑，比如查询cookie或Vuex状态
  return false; // 这里我们假设用户未登录
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查目标路由是否需要认证
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    // 如果需要认证且用户未登录，则跳转到登录页
    next('/login');
  } else {
    // 否则允许访问
    next();
  }
});

export default router;

router.beforeResolve((to, from, next) => {
  // 在这里进行异步数据获取操作
  // 比如通过API请求获取数据
  console.log('导航即将被确认，可以进行数据获取操作');
  next();
});

router.afterEach((to, from) => {
  // 在这里进行页面title设置等操作
  document.title = to.meta.title || '默认标题';
  console.log('导航已完成');
});

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, requiresAdmin: true },
    beforeEnter: (to, from, next) => {
      // 假设我们有一个检查用户是否登录和是否具备管理员权限的函数
      function isUserLoggedIn() { return false; } // 用户未登录
      function isUserAdmin() { return true; } // 用户是管理员（这里只是模拟）

      // 检查用户是否登录
      if (to.meta.requiresAuth && !isUserLoggedIn()) {
        // 如果需要认证且用户未登录，则重定向到登录页
        next('/login');
      } else if (to.meta.requiresAdmin && !isUserAdmin()) {
        // 如果需要管理员权限且用户不是管理员，则重定向到无权限页面
        next('/403');
      } else {
        // 否则允许访问
        next();
      }
    }
  }
];

const router = new Router({
  routes
});

export default {
  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行数据预加载等操作
    console.log('准备进入MyComponent组件');
    next(vm => {
      // 访问组件实例
      vm.fetchData();
    });
  },
  methods: {
    fetchData() {
      // 数据加载逻辑
      console.log('加载数据');
    }
  }
};

export default {
  name: 'MyComponent',
  beforeRouteUpdate(to, from, next) {
    // 在路由变化时执行数据更新等操作
    console.log('MyComponent组件的路由正在更新');
    this.fetchData(); // 调用数据更新方法
    next();
  },
  methods: {
    fetchData(params) {
      // 根据新的路由参数加载数据
      console.log('根据新参数加载数据');
    }
  }
};

export default {
  name: 'MyComponent',
  data() {
    return {
      hasUnsavedChanges: false // 用于标识是否有未保存的更改
    };
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前路由前执行确认操作
    if (this.hasUnsavedChanges) {
      // 提示用户是否确认离开
      const answer = window.confirm('你有未保存的更改，确认离开吗？');
      if (answer) {
        next(); // 用户确认离开，允许导航
      } else {
        next(false); // 用户取消离开，阻止导航
      }
    } else {
      next(); // 没有未保存的更改，允许导航
    }
  }
};