一、前言
在以往的项目中路由模式都是使用默认的 hash,最近的一个项目中用到了 history 模式,但是出现一些问题。在这里对着两种模式做一个对比。
二、hash 模式
在 Vue Router 中默认使用的是 hash 模式,所以在使用这种模式是不需要设置的,直接默认就行。
const router = newVueRouter({
routes: [...]
})
在请求路由的时候是使用 URL 的 hash 来模拟完整的 URL,所以当 URL 改变时,页面不会重新加载。
具体如下所示:
http://localhost:8000/#/home
看到这个类似于以往使用的锚点一样。
所以页面的请求和路由是可以完全分开的(子所以这样说是为了和 history 对应)。这样的话页面的路由全部由前端进行控制,对应没有匹配的路由可以设置一个 404 页面。
三、history 模式
声明 router 的时候如果使用 history 模式需要显示设置:
const router = newVueRouter({
mode:'history',
routes: [...]
})
使用 history 模式后 URL 就像正常的 URL:
http://localhost:8000/home
使用 history 模式需要注意一些问题:
1、服务端也需要配置一个静态页面,当 URL 匹配不到任何资源的时候返回
2、使用代理的时候,最好把 pathRewrite 设置为和路由不一样的,否则可能会导致请求路由时也被代理,但是返回的不是想要的静态页面