Vue路由History模式分析

Vue Router 是 Vue 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vue Router 可以让我们通过前端路由来实现页面之间的切换和跳转，它的 History 模式一般用于生产环境并且需要后端支持。

History 模式

Vue Router 根据浏览器的不同，支持两种路由模式：

• hash 模式：默认路由模式。
• history 模式：需要后端支持。

当浏览器不支持 HTML5 History API 时，自动降级为 hash 模式。在 Vue Router 中，激活 History 模式很简单，只需要在创建 Router 实例时传入 mode: 'history' 即可。

同时，我们需要在服务器上也进行一些配置来支持 History 模式。当用户访问我们网站时，我们需要确保在服务端正确地响应用户请求的 URL。

History 模式配置

在使用 History 模式时，我们需要配置服务器，确保页面在刷新后能正确响应：

Apache 配置

对于 Apache 来说，我们需要开启 mod_rewrite 模块，并且设置一个 .htaccess 文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx 配置

对于 Nginx 来说，我们需要在服务器配置文件中添加以下代码：

location / {
  try_files $uri $uri/ /index.html;
}

history 模式的优缺点

优点

• URL 更美观，清晰易读。
• 对搜索引擎更加友好。
• 提供了良好的用户体验。

缺点

• 需要后端服务器的支持。
• 刷新页面后会向服务器发送请求，增加了服务器负担。
• 对于线上环境需要进行服务器的一些配置。

示例

下面给出一个使用 History 模式的 Vue Router 示例：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/login', component: Login }
  ]
});

如上代码块所示，我们通过指定 mode: 'history' 来启用 History 模式。

此外，我们还需要在服务端进行相关配置，确保页面在刷新后能正确响应。以上述 Apache 配置为例：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

在这个例子中，我们指定了四个路由：

1. '/'：对应的组件是 Home。
2. '/about'：对应的组件是 About。
3. '/contact'：对应的组件是 Contact。
4. '/login'：对应的组件是 Login。

当用户访问这些路由时，Vue Router 会展现对应的组件。

参考资料

• Vue Router 官方文档
• Vue 路由使用 history 模式需要服务器端支持的一个坑点