返回

Vue路由history模式下刷新页面404的终极解决方案

前端

Vue路由简介

Vue路由是一个轻量级的、基于Vue.js的路由库，它使开发单页面应用（SPA）变得更加容易。Vue路由支持两种模式：hash模式和history模式。

  • hash模式 ：使用URL的哈希部分来模拟完整的URL，因此在URL发生变化时不会重新加载页面。
  • history模式 ：使用HTML5 History API来管理浏览器历史记录，提供更接近传统Web应用程序的URL体验。

history模式下的404错误

在history模式下，刷新页面时可能会出现404错误，这是因为服务器无法找到与刷新后的URL对应的实际文件。这是因为history模式不会在服务器上创建实际文件，而是依靠HTML5 History API来管理浏览器历史记录。

解决方案

要解决此问题，需要在服务器上进行一些配置。

Nginx

对于Nginx服务器，需要在根目录下添加一个index.html文件。此文件将作为所有找不到实际文件的URL的默认页面。

# /index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

此外，还需要在Nginx配置文件中添加以下配置：

# nginx.conf
location / {
  try_files $uri /index.html;
}

Apache

对于Apache服务器，需要在.htaccess文件中添加以下规则：

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

HTML5 History API

HTML5 History API提供了一些方法来管理浏览器历史记录，包括pushState()和replaceState()。这些方法允许开发人员在不重新加载页面的情况下修改URL。

// 使用 pushState() 添加新历史记录条目
history.pushState({ foo: 'bar' }, 'Title', '/new-url');

// 使用 replaceState() 替换当前历史记录条目
history.replaceState({ foo: 'bar' }, 'Title', '/new-url');

示例代码

下面是一个使用Vue路由history模式的示例代码：

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: App,
    },
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

结论

通过在服务器上进行适当的配置并利用HTML5 History API，可以解决Vue路由history模式下刷新页面时出现的404错误问题。这将确保单页面应用程序在使用history模式时具有无缝的URL体验。