本文共 1015 字，大约阅读时间需要 3 分钟。

一、history路由模式

history模式在vue router中默认配置，不需额外设置即可支持配额式路由访问。然而需要注意的是，在仅配置history模式而不设置后端路由时，会导致访问路径出现#占位符，且可能引发404错误。因此建议配合后端文件配置，确保前后端路由一致性。

后端配置注意事项：

- 需在后端服务器上配置对应文件路径，确保前后端路由一致无误。 - 不配置或配置不完整会导致访问页面时出现404错误。

二、路由守卫功能

路由守卫允许定义访问控制规则，用于保护敏感页面。常见于电商系统中的“我的”功能，在未登录状态下访问将自动跳转至登录页面。通过守卫可以有效防止未授权访问。

(1)全局路由守卫

全局守卫能拦截所有路由请求，类似于进入门前的身份检查。例如，就像校园大门验健康码一样，在允许进入前完成身份验证。

在vue router中设置全局守卫如下：

- 在路由主配置文件（router/index.js）中添加拦截器函数。 - 内容例如：验证用户登录状态，无登录则跳转至登录页面。

具体实现步骤：

1. 定义登录页面组件并导入。 2. 在路由配置文件中加入登录页面路由。 3. 在全局拦截器中调用登录验证逻辑。

示例代码片段：

```javascriptuse router().beforeEach('checkLogin', (to, from, next) => { const user = localStorage.getItem('user'); if (!user) { next('/login'); } else { next(true); }});```

(2)局部路由守卫

局部守卫适用于特定路由页面的访问控制。`beforeRouteEnter`生命周期钩子可用于登录前检查，确保未登录用户无法进入目标页面。

在组件路由中配置如下：

- 在目标页面组件中添加`beforeRouteEnter`守卫。 - 使用组件实例方法验证用户身份。

示例代码：

```javascript

   
  
完整实现步骤
  1. 创建登录组件并注册路由。  2. 在全局守卫中定义身份验证逻辑。  3. 在目标页面组件中添加本地守卫。  
   
  
特别注意：
  - 全局守卫适用于所有页面，需谨慎设置规则。  - 本地守卫可灵活配置，适用于特定页面需求。  - 建议结合项目实际需求选择合适的守卫类型。

转载地址：http://qrthz.baihongyu.com/