VueRouter — 实现简单Router
最后更新于：2022-04-02 08:11:47
>[success] # VueRouter -- 实现简单Router
* 说明本节内容代码来自拉勾大前端课程内容
~~~
1.想看懂本章节内容，推荐优先看上一个章节中对一些知识点概念化讲解
~~~
>[info] ## 实现一个简单的Router
~~~
1.在上一个章节，可以明确知道当想使用'Vue Router' 路由的时候需要Vue.use，use方法在调用的时候
其实调用的是注册插件的isntall方法，现在可以明确要写的简单'Router' 内部必须有一个'install'方法
2.关于整个类的参数定义介绍
'data':
options - 记录构造函数中传入的对象
data - 是一个对象包含current 记录当前的路由地址， 调用Vue.observable方法将其设置为响应式对象
routeMap - 记录路由地址与组件的对应关系，将路由规则解析到这里
'methods': +号是公共方法 _ 是静态方法
+Constructor(Options): VueRouter - 初始化options
_install(Vue): void - 实现vue插件的机制
+init(): void - 用于调用下面三个方法
+initEvent(): void - 用于实现popState方法, 监听浏览器历史的变化
+createRouteMap(): void - 初始化routemap属性，将options转换成键值对存储到routemap中 ，
键为路由地址，值为对应组件
+initComponents(Vue): void - 创建router-link 和 router-view两个组件
~~~
>[danger] ##### 分析 install 方法知识点
~~~
1.isntall虽然是一个方法但是他也是一个对象，我们这里直多添加一个'installed' 来防止插件被多次注册
2.再用 _Vue.mixin 作为全局混入，还需要将router 实例绑定在'$route'属性上,'$options 存储构造函数的传入参数'
所以'Vue.prototype.$router = this.$options.router'
3.'this.$options.router' 原因因为全局混入所有的组件在'beforeCreate' 声明周期的时候都会执行，此时只想
在跟Vue实例时候执行我们这次绑定，只有根时候才有'this.$options.router' 避免了重复执行
~~~
~~~
// 实现Vue插件机制
static install(Vue) {
// 1. 判断当前插件是否被安装 用于是否需要安装
if (VueRouter.install.installed) {
return
}
VueRouter.install.installed = true
// 2. 把Vue构造函数记录到全局变量 用于使用Vue构造函数相关方法
_Vue = Vue
// 3. 创建Vue实例时传入的router对象注入到所有的Vue实例中 可以使用this.$router
// _Vue.prototype.$router = this.$options.router // this指向VueRouter
// 使用混入获取Vue实例 所有Vue实例混入选项
_Vue.mixin({
// beforeCreate钩子，实例创建前执行，添加router对象
beforeCreate() {
// Vue实例执行 Vue组件不执行 避免重复执行
if (this.$options.router) {
_Vue.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
~~~
>[danger] ##### initComponents
~~~
1.这里还需要创建'router-link'和'router-view
' 两个组件，配合路由的使用
~~~
~~~
// 创建两个组件 router-link与router-view
initComponents(Vue) {
// 创建router-link 接收路由地址 并且本质为超链接
// 此处超链接跳转会向服务器发送请求 单页面不需要发送服务器请求
// 因此拦截超链接跳转并修改地址栏中的地址 使用history.pushState 并且将记录到data中current中
Vue.component('router-link', {
props: {
to: String
},
// 使用插槽，在使用时会将内容填充到插槽中
// 运行时版本 不支持template
// template: '
';