如何在 Vue Router 中实现路由保护来控制导航？

在Vue Router中实现路由保护主要是通过使用导航守卫（navigation guards）。导航守卫是一些可以在路由导航发生之前执行的钩子函数，通过这些钩子函数我们可以进行权限验证、数据预加载、条件跳转等操作。Vue Router 提供了多种类型的导航守卫，如全局守卫、路由独享守卫和组件内守卫。

全局守卫

全局守卫适用于需要在跳转任何页面前执行的逻辑，如用户认证。

示例：

javascript
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.isLoggedIn()) {
      // 若用户未登录，则跳转到登录页面
      next({ path: '/login' });
    } else {
      // 如果已登录，正常跳转到目标页
      next();
    }
  } else {
    next(); // 确保一定要调用 next()
  }
});

路由独享守卫

路由独享守卫只在某个特定的路由被访问时才会被调用。

示例：

javascript
const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        if (!auth.isLoggedIn()) {
          next({ path: '/login' });
        } else {
          next();
        }
      }
    }
  ]
});

组件内守卫

组件内守卫允许你在路由组件内直接定义守卫。

示例：

javascript
export default {
  beforeRouteEnter(to, from, next) {
    if (!auth.isLoggedIn()) {
      next({ path: '/login' });
    } else {
      next();
    }
  }
};

使用这些守卫，我们可以根据用户的登录状态或其他条件来控制用户的导航行为，从而实现路由保护。