vue 中的 hash 与 history 两种路由模式
# 1、hash 路由模式
即地址栏 URL
中的 #
符号(此 hash
不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/home
,hash
的值为 #/home
。它的特点在于:hash
虽然出现在 URL
中,但不会被包括在 HTTP
请求中,对后端完全没有影响,因此改变 hash
不会重新加载页面。
# 2、history 路由模式
主要利用了 HTML5 History Interface
中新增的 pushState()
和 replaceState()
方法。但值得注意的是,在访问二级页面的时候,做刷新操作,会出现 404
错误,那么就需要和后端人配合让他配置一下 apache
或是 nginx
的 url
重定向,重定向到你的首页路由上就 ok
了。下面 以 Node
后台为例:
// 解决vue 路由在 history刷新 404情况
router.get('*', async(ctx, next) => {
if (ctx.url !== "/index.html") {
console.log("在这里返回")
ctx.body = str;
}
})
2
3
4
5
6
7
# 3、应用场景
这两个方法应用于浏览器的历史记录栈,在当前已有的 back
、forward
、go
的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL
,但浏览器不会立即向后端发送请求。因此可以说,hash
模式和 history
模式都属于浏览器自身的特性,Vue-Router
只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。
一般场景下,hash
和 history
是都可以的,除非你不想在 url
中出现 #
符号就可以使用路由的 history
模式,这种模式充分利用 history.pushState API
来完成URL 跳转而无须重新加载页面。
# 4、总结
1、在
hash
模式下,仅hash
符号之前的内容会被包含在请求中,如http://www.abc.com
,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404
错误。2、在
history
模式下,前端的URL
必须和实际向后端发起请求的URL
一致,如http://www.abc.com/article/id
。如果后端缺少对/article/id
的路由处理,将返回404
错误。Vue-Router
官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果URL
匹配不到任何静态资源,则应该返回同一个index.html
页面,这个页面就是你app
依赖的页面。”
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13