返回

深入浅出 vue-router之history模式路由:抛弃哈希(#)，拥抱简洁链接的现代前端路由

前端

使用 Vue-Router 的 History 模式打造更现代的 SPA

在单页应用（SPA）中，前端路由器是页面切换不可或缺的组件，而 Vue.js 官方推荐使用 Vue-Router。在 Vue-Router 中，有两种常见的路由模式：hash 模式和 history 模式，其中 history 模式拥有众多优势。

History 模式的优势

  • 更好的用户体验： history 模式下的 URL 与传统网页 URL 类似，更易于用户理解和记忆。
  • 更利于 SEO： history 模式下的 URL 可以被搜索引擎抓取和索引，有助于提升网站排名。
  • 更安全的链接： history 模式下的链接不包含哈希值，不易受到跨站脚本攻击（XSS）的攻击。

History 模式的工作原理

history 模式利用浏览器的历史记录 API 来实现路由。当用户访问页面时，Vue-Router 会创建一个新的历史记录条目，其中包含页面的 URL。点击链接时，Vue-Router 会将链接的 URL 添加到历史记录中，并加载相应的页面。

在 Vue.js 项目中启用 History 模式

在 Vue.js 项目中启用 history 模式非常简单，只需执行以下步骤：

  1. 在 vue.config.js 文件中，设置 router.mode 为 "history"：
module.exports = {
  router: {
    mode: 'history'
  }
};
  1. 在服务器端，对所有路由进行重定向，确保任何请求都指向同一个入口页面（通常是 index.html）。在 .htaccess 文件中添加以下配置：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
  1. 如果服务器不支持 .htaccess 文件，需要在服务器代码中进行重定向。例如，在 Node.js 中：
const express = require('express');
const app = express();

app.use((req, res, next) => {
  if (req.url === '/') {
    res.sendFile(path.join(__dirname, 'index.html'));
  } else {
    next();
  }
});

app.listen(3000);

总结

Vue-Router 的 history 模式提供了更优化的用户体验、更利于 SEO 和更安全的链接。通过在 Vue.js 项目中启用 history 模式，您可以轻松打造一个更加现代、更加用户友好的 SPA。

常见问题解答

1. 使用 history 模式会影响我的旧链接吗？

不会，使用 history 模式不会影响旧链接，因为服务器端重定向会确保所有请求都指向同一个入口页面。

2. 如何在 history 模式下使用 Vue-Router 的滚动行为？

可以使用 scrollBehavior 选项，它允许您指定页面切换时的滚动行为。

3. 如何在服务器端渲染时使用 history 模式？

使用服务器端渲染时，需要在服务器端创建历史记录条目。可以使用 window.history.pushState() 方法实现。

4. 如何使用 Nginx 设置 history 模式？

在 Nginx 服务器中，需要添加以下配置：

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

5. 如何使用 Apache 设置 history 模式？

在 Apache 服务器中，需要添加以下配置：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]