Vue项目集成H5历史模式，畅享刷新页面无死角

对于初级前端工程师来说，使用前端路由是不可避免的，而使用前端路由过程中经常会遇到刷新页面导致404错误，这是由于前端路由使用了H5历史模式。

如果您选择使用 vue-router 路由，开发了带路由的前端项目，那么如何解决刷新页面导致的 404 错误问题呢？

使用H5历史模式可以使网页看着更美观，更加接近 SPA 单页应用，但需要注意的是，后端nginx需要做一点配置，才能保证多端访问下，不会出现刷新页面404的问题。

解决方法如下：

1. 修改Vue项目的配置文件。

2. 配置nginx。

修改Vue项目的配置文件：

在Vue项目的根目录下，找到config目录，然后打开index.js文件。在文件中找到下面的配置项，将其注释掉。

history: {
  mode: 'hash',
  base: '/'
},

然后将mode的值改为history，如下：

history: {
  mode: 'history',
  base: '/'
},

配置nginx：

在nginx的配置文件中，找到server块，然后在其中添加以下配置：

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

保存nginx的配置文件并重启nginx，问题解决。

上面方法的原理是，如果请求的资源不存在，那么就返回index.html文件，从而避免404错误的出现。

如果您想实现路由切换时，页面滚动到顶部，或保持原先的滚动位置，这里有一个解决办法：

在Vue项目的根目录下，找到router目录，然后打开index.js文件。在文件中找到下面的代码：

const router = new VueRouter({
  routes: routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

这样，当路由切换时，页面就会滚动到顶部。

如果您想实现多端访问，这里有一个解决办法：

在nginx的配置文件中，找到server块，然后在其中添加以下配置：

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

location /api {
  proxy_pass http://localhost:3000;
}

这样，就可以实现多端访问了。