手写vue-router

vueRouter

（引用Vue Router 的官方介绍）Vue Router 是 Vue 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

实现router插件

注册组件实现install方法

let Vue;//保存Vue实例
//1、实现插件
class VueRouter {
};
//2、插件要实现一个install方法
VueRouter.install = function(_Vue){
};
//3、导出插件
export default VueRouter;

这段是做一个插件必须要的。

注册组件routerview和routerlink

Vue.component("router-view",{
	render(h){
		let component = null;//定义一个空的component
		const { current, options } = this.$router;//读取路由
		const route = options.routes.find((route) => { route.path === current });//如果路由匹配
		if(route){
			component = route.component;//获取路由记录的component
		}
		return h(component)//h函数渲染
	}
});

Vue.component("router-link",{
	props:{
		to:{
			type:String,
			required:true
		}
	},//必须先传入一个to的地址变量
	render(h){
		return h("a",{ attrs: { href: "#" + this.to }},this.$slots.default);//h函数渲染a节点，用来跳转Url
	}
});

获取router提供给routerview

//注册Router实例
//通过全局混入的方法获得router
Vue.mixin({
	beforeCreate(){
		//仅需要在根组件获取一次
		//this指向Vue,根组件可以获取到$options里的router
		//不需要在每个页面都引用
		if(this.$options.router){
			Vue.prototype.$router = this.$options.router;//将router挂载到Vue实例中
		}
	}
})

获取当前的hash

//响应式获取当时的Url
//响应式的两种方法
//1、使用Vue(){
//	data(){
//}}
//2、使用defineReactive
Vue.util.defineReactive(
	this,
	"current",
	window.location.hash.slice(1) || "/"
)
//监控Url变化
window.addEventListener("hashchange",() => {
	this.current = window.location.hash.slice(1);//获取Url#后的内容
})

完成routerview渲染页面

Vue.component("router-view",{
	render(h){
		let component = null;//定义一个空的component
		const { current, options } = this.$router;//读取路由
		const route = options.routes.find((route) => { route.path === current });//如果路由匹配
		if(route){
			component = route.component;//获取路由记录的component
		}
		return h(component)//h函数渲染
	}
});

其他

问：为什么routerView和Vue强相关？
回答：因为routerView是vue插件，方法内多次调用vue实例