Vue Router 中模式选择

Posted 2021-02-19 zhurong

一、前言

在以往的项目中路由模式都是使用默认的 hash，最近的一个项目中用到了 history 模式，但是出现一些问题。在这里对着两种模式做一个对比。

二、hash 模式

在 Vue Router 中默认使用的是 hash 模式，所以在使用这种模式是不需要设置的，直接默认就行。

const router = new VueRouter({
  routes: [...]
})

在请求路由的时候是使用 URL 的 hash 来模拟完整的 URL，所以当 URL 改变时，页面不会重新加载。

具体如下所示：

http://localhost:8000/#/home

看到这个类似于以往使用的锚点一样。

所以页面的请求和路由是可以完全分开的（子所以这样说是为了和 history 对应）。这样的话页面的路由全部由前端进行控制，对应没有匹配的路由可以设置一个 404 页面。

三、history 模式

声明 router 的时候如果使用 history 模式需要显示设置：

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

使用 history 模式后 URL 就像正常的 URL：

http://localhost:8000/home

使用 history 模式需要注意一些问题：

1、服务端也需要配置一个静态页面，当 URL 匹配不到任何资源的时候返回

2、使用代理的时候，最好把 pathRewrite 设置为和路由不一样的，否则可能会导致请求路由时也被代理，但是返回的不是想要的静态页面