Vue路由重写# 与 Web服务器路由重写双配置实现路由重写

前言

vue路由组件我使用的vue-router
web服务器使用nginx

Vue-router配置

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载
http://localhost:8080/#/HelloWorld
如果不想要很丑的 hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router =new Router({
  mode: 'history',
  routes: [...]
})

不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问就会返回 404

Web服务器配置

如果要使用history模式，则需要进行服务器配置
所以，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app 依赖的页面
下面分别介绍Nginx和Apache下的重写配置

Nginx配置

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

Apache配置

首先，去掉rewrite_module前面的#号注释
LoadModule rewrite_module modules/mod_rewrite.so
然后，将文档所有的AllowOverride设置为all
AllowOverride all
最后，需要保存一个.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>

小结

这么做以后，服务器就不再返回404错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，应该在Vue应用里面覆盖所有的路由情况，访问错误路由即跳转指定路由，这里一般是自动跳转首页或者跳转404错误页
const router = new VueRouter({
mode: ‘history’,
routes: [
{ path: ‘*’, redirect: ‘/’,}
]
})

参考

Vue-router
Vue路由vue-route