2021-08-13 Vue Router学习笔记

原理

前端路由就是更新视图但是不重新请求界面，在浏览器环境中，实现这个功能有两种方法：
1.利用URL中的hash（#）
2.利用history interface在HTML5中新增的方法。
Vue router就是通过这两种方法来实现前端路由的。

模式参数
vue router是通过mode这一参数控制路由实现模式：

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

在创建VueRouter的时候，mode以构造函数参数的形式传入。
系统默认的模式为hash模式，在创建VueRouter的时候会先确定浏览器是否支持HTML5，如果不支持的话，滚回hash模式

HashHistory

URL中的#代表的就是网页当中的一个位置，它后面的字符称为hash，可以通过window.location.hash属性来读取，它的特点有：
1.hash虽然存在与URL中，但是不会被包括在HTTP请求中，它是用来指导浏览器的动作，不会改变服务器，所以改变hash不会重新加载界面。
2.可以为hash的改变添加监听事件：

window.addEventListener("hashchange", fun, false)

3.每次改变hash，浏览器中的记录就会增加

HashHistory.push()

push(location: RawLocation, onComplete?: Function, onAbort?: Function) {
   
	this.transitionTo(location, route => {
   
		pushHash(route.fullPath)
		onComplete && onComplete(route)
	}, onAbort) 
}

function pushHash(path) {
   
	window.locaiton.hash = path
}

transitionTo()这个方法是用来处理路有变化中的基础逻辑，push方法主要是对window中的hash进行直接赋值，hash的改变会复制到浏览器的历史记录中

视图更新的实现：

transitionTo (location: RawLocation, onComplete?:Funtion, onAbort?:Function){