一、为了达到这个目的,浏览器提供了 hash
与history
两种支持:
为什么这两种模式实现了更新视图但不请求页面?
hash
——即地址栏URL
中的#
符号(此hash
不是密码学里的散列运算)。
比如这个URL:http://www.abc.com/#/hello
,hash
的值为#/hello
。它的特点在于:hash
虽然出现URL
中,但不会被包含在HTTP
请求中,它是用来指导浏览器动作的,对后端完全没有影响,因此改变hash
不会重新加载页面。history
——利用了HTML5 History Interface
中新增的pushState()
和replaceState()
方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的back
、forward
、go
基础上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的URL,但浏览器不会立即向后端发送请求。
history
模式,会出现404 的情况,需要后台配置。
二、404 错误
hash
模式下,仅hash
符号之前的内容会被包含在请求中,如http://www.abc.com
, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;history
模式下,前端的url
必须和实际向后端发起请求的url
一致,如http://www.abc.com/book/id
。如果后端缺少对/book/id
的路由处理,将返回404错误。
三、延伸阅读
vue-router
实例化如下:
const router = new VueRouter({
mode: "XXX",
routes: [...]
})
VueRouter
实例化如下:
export default class VueRouter {
mode: string; // 传入的字符串参数,指示history类别
history: HashHistory | HTML5History | AbstractHistory; // 实际起作用的对象属性,必须是以上三个类的枚举
fallback: boolean; // 如浏览器不支持,'history'模式需回滚为'hash'模式
constructor (options: RouterOptions = {}) {
let mode = options.mode || 'hash' // 默认为'hash'模式
this.fallback = mode === 'history' && !supportsPushState // 通过supportsPushState判断浏览器是否支持'history'模式
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract' // 不在浏览器环境下运行需强制为'abstract'模式
}
this.mode = mode
// 根据mode确定history实际的类并实例化
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE\_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
// 初始化操作, app表示组件实例
init (app: any /\* Vue component instance \*/) {
// ...
this.apps.push(app)
// main app already initialized.
if (this.app) {
return
}
this.app = app
const history = this.history
// 根据history的类别执行相应的初始化操作和监听
if (history instanceof HTML5History) {
// html5模式
history.transitionTo(history.getCurrentLocation())
} else if (history instanceof HashHistory) {
// hash模式
const setupHashListener = () => {
history.setupListeners()
}
history.transitionTo(
history.getCurrentLocation(),
setupHashListener,
setupHashListener
)
}
// 切换路由
history.listen(route => {
this.apps.forEach((app) => {
app._route = route
})
})
}
// 一些钩子函数 beforeEach、 afterEach等
// ...
// ...
// VueRouter类暴露的以下方法实际是调用具体history对象的方法
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.push(location, onComplete, onAbort)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.replace(location, onComplete, onAbort)
}
}
// 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
go (n: number) {
this.history.go(n)
}
// 后退到上一个页面
back () {
this.go(-1)
}
// 前进到下一个页面
forward () {
this.go(1)
}
// ...
// ...
代码解读:
- 浏览器默认是
hash
模式,当浏览器不支持html5的history
模式时,也会强制为hash
模式;当环境不是浏览器时,强制为abstract
模式。 - 当创建
VueRouter
实例后,VueRouter
构造函数会通过传入对象options
的mode
参数,来调用对应的(HashHistory / HTML5History / AbstractHistory
)构造函数,进而创建对应的history
实例对象。 - 创建相应的
history
实例后,可以看到init
函数里面会有对应的初始化操作。
$router
实例有两个常见的跳转方法:push
与replace
方法,源码的最下面,就暴露出来这两个方法。很显然这两种方法都是对不同模式下的方法的封装,本质还是执行的对应模式上的方法。
HashHistory
中的push()
方法:
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
// 执行transitionTo函数
this.transitionTo(location, route => {
// 改变hash值
pushHash(route.fullPath)
onComplete && onComplete(route)
}, onAbort)
}
function pushHash (path) {
window.location.hash = path
}
pushHash
直接对window.location.hash
赋值,hash
值变化之后,浏览器访问历史中就会增加一个记录。
记录增加了,如何更新视图呢?接着看父类History中transitionTo
函数是如何实现的。
transtitionTo
函数具体实现如下:
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
//找到匹配路由(match函数)
const route = this.router.match(location, this.current)
this.confirmTransition(route, () => { //确认是否转化
this.updateRoute(route) //更新route
// ...
})
}
//更新路由
updateRoute (route: Route) {
const prev = this.current // 跳转前路由
this.current = route // 准备跳转路由
this.cb && this.cb(route) // 回调函数,这一步很重要,这个回调函数在index文件中注册,会更新被劫持的数据 \_router
this.router.afterHooks.forEach(hook => {
hook && hook(route, prev)
})
}
}
// this.cb函数的定义
listen (cb: Function) {
this.cb = cb
}
在transitionTo
函数中,执行了updateRoute
更新路由函数,这个函数中执行了cb
这个函数,cb
这个函数是在VueRouter
实例中的init
函数中通过history.listen
传入的。
### 最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/b2171429a9063503de0b5e7d4f5f0db4.webp?x-oss-process=image/format,png)
![](https://img-blog.csdnimg.cn/img_convert/ea96e5ee04eca346da1d1cfcadee7272.webp?x-oss-process=image/format,png)
文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
[外链图片转存中...(img-vHTJ3kix-1714378524384)]
[外链图片转存中...(img-WAVwuBW7-1714378524385)]