vue-router路由独享使用场景

### vue-router 路由独享守卫使用场景

路由独享守卫专门用于特定的路由配置对象，这意味着只有当访问该特定路径时才会触发这些守卫函数。这种机制非常适合用来处理一些只针对某个页面或功能模块特有的逻辑验证需求。

#### 场景一：权限校验
对于某些敏感资源或者管理后台类的应用程序来说，在用户尝试进入某一路由之前检查其是否有足够的权限是非常必要的。通过设置独享前置守卫`beforeEnter`可以实现这一点[^2]：

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    if (!store.getters.isAdmin) { 
      alert('无权访问');
      next({path: '/'});
    } else {
      next();
    }
  }
}

上述代码片段展示了如何阻止非管理员角色的用户访问 `/admin` 页面，并重定向至首页。

#### 场景二：数据预取加载
如果希望在渲染视图前预先获取所需的数据，则可以在独享守卫中发起API请求并等待响应完成后再继续导航流程。这有助于提升用户体验，减少空白页时间[^4]:

const User = {
  template: `<div>User</div>`,
  asyncData ({ params, store }) {
    return axios.get(`/api/users/${params.id}`)
      .then((res) => {
        store.commit('setUser', res.data);
      });
  },
};

new Vue({
  router: new Router({
    routes: [
      {
        path: '/user/:id',
        component: User,
        beforeEnter: (to, from, next) => {
          User.asyncData({ params: to.params }).then(() => {
            next();
          });
        }
      }
    ]
  })
})

这里定义了一个名为 `asyncData` 的方法来模拟异步操作过程中的数据准备阶段；随后利用 `beforeEnter` 守卫确保每次进入此路由都会调用它来进行相应的准备工作。

#### 场景三：表单保存提示
假设存在一个多步骤向导式的界面设计模式下，其中包含多个子页面作为不同步骤之间的跳转链接。此时可以通过监听即将离开当前组件事件(`beforeRouteLeave`) 来询问用户是否要放弃未保存的信息[^1]：

export default {
  data() {
    return {
      formDirty: false // 表示表单状态是否已更改
    };
  },

  methods: {
    onFormChange() {
      this.formDirty = true;
    }
  },

  beforeRouteLeave(to, from, next) {
    if (this.formDirty && !confirm('您有未保存的内容，确认退出吗？')) {
      next(false); // 取消导航
    } else {
      next();       // 继续执行默认行为
    }
  }
};

这段代码实现了这样一个功能——只要检测到用户修改过任何字段就会标记为脏态 (`formDirty=true`) ，一旦试图切换其他页面则会弹框提醒用户决定是否真的想要丢弃变更内容。