Vue Router 中导航确认的实现方式

在 Vue Router 的应用开发中，导航确认是一个至关重要的功能，它能帮助开发者更好地控制用户在不同路由之间的切换行为，提升用户体验并确保应用逻辑的正确性。

导航守卫是实现导航确认的关键手段。其中，全局前置守卫 router.beforeEach 可以在每次路由切换前触发。例如，在用户未登录的情况下，若试图访问需要权限的页面，我们可以利用这个守卫进行拦截。代码实现如下：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth &&!isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

上述代码中，to 代表即将进入的目标路由，from 表示当前离开的路由，next 函数用于控制导航的流程。如果目标路由的 meta 字段中设置了 requiresAuth 且用户未认证，就会将用户导航到登录页面。

除了全局前置守卫，路由独享守卫也提供了导航确认的能力。在定义路由时，可以直接在单个路由配置中使用 beforeEnter 守卫。例如：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      const isAdmin = localStorage.getItem('role') === 'admin';
      if (isAdmin) {
        next();
      } else {
        next('/');
      }
    }
  }
];

这种方式适用于对特定路由进行单独的导航控制，比如只有管理员才能访问的后台页面。

组件内守卫则是在组件内部定义的导航守卫。beforeRouteEnter 可以在进入组件前触发，beforeRouteUpdate 在路由参数变化但组件复用时触发，beforeRouteLeave 在离开组件时触发。例如，当用户在一个表单页面未保存数据想要离开时，可以使用 beforeRouteLeave 进行提示：

export default {
  beforeRouteLeave(to, from, next) {
    const hasUnsavedChanges = this.$refs.form.hasUnsavedChanges();
    if (hasUnsavedChanges) {
      const confirm = window.confirm('你有未保存的数据，确定要离开吗？');
      if (confirm) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
};

通过合理运用这些导航守卫，我们可以在 Vue Router 中灵活地实现各种导航确认逻辑，确保应用的交互和安全性能达到最佳状态。