Vue Router 模式

一、前言

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

二、hash 模式

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

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

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

具体如下所示：

http://localhost:8000/#/home

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

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

特点以及原理：

1、url 中 # 后面的是路由（类似以前经常用的锚点）

2、当路由改变时，url # 后面路由改变，这时页面不会重新加载

3、是通过 window 的 hashChange 进行监听改变，并作出对应的页面改变

三、history 模式

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

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

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

http://localhost:8000/home

特点以及原理：

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

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

3、url 形式和一般的 url 一样

4、是通过 H5 中的 History Interface 新增的 pushState() 和 replaceState() 两个方法实现

5、浏览器的 go、forward、back 记录历史，上面两个方法可以对这些历史记录进行修改，当修改 url 时，不会立即向后端发送请求。

 

对于具体的原理分析参考：单页面路由实现原理