实现小型 vueRouter， 并了解其内部原理
一、安装Vue项目
1. 可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli # OR yarn global add @vue/cli
2. 你还可以用这个命令来检查其版本是否正确：
vue --version
3. 运行以下命令来创建一个新项目：
vue create vueRouter
二、新建所需文件
1. 新建 pages / index.vue / home.vue / hello.vue 三个文件, 共用一下模版
<template>
<div>index / home / hello </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2. 修改App.vue 文件
<template>
<div id="app"
class="hello">
<router-link to="/Hello">Hello | </router-link>
<router-link to="/time">time | </router-link>
<router-link to="/date">date</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
三、VueRouter
1. 新建 router / VueRouter.js
let _Vue = null
export default class VueRouter {
constructor(options) {
// 记录构造函数中传入当对象，{ routes: 路由规则, }
this.options = options
// 路由地址和组件当关系，将路由规则解析到routeMap里面 ----{ 路由名：路由组件 }
this.routeMap = {}
// data: { current: 当前路由地址 } ， data为响应式对象
// mode 在默认情况下是hash模式，只有当设置为history模式时，才会进入历史模式
this.data = _Vue.observable({
current: options.mode === 'history' ? window.location.pathname : window.location.hash.slice(1)
})
}
// 实现Vue的插件机制
static install(Vue) {
// 1. 判断当前插件是否被安装
if (VueRouter.install.installed) return
VueRouter.install.installed = true
// 2. 把Vue构造函数记录到全局变量
_Vue = Vue
// 3. 把创建Vue实例时候传入到router对象注入到Vue实例上
// 混入
_Vue.mixin({
beforeCreate() {
// 请注意---此时的this，表示的是Vue实例，因为在此处无法访问到的this是Vue, 所以此处我们使用this.$options.router来代替VueRouter的this
// 在获取Vue实例的时候，注入 （ 组件不会掉用 ）
if (this.$options.router) {
// 将构造函数中注册的options, routeMap, data , 挂载到 Vue的原型上
_Vue.prototype.$router = this.$options.router
//
this.$options.router.init()
}
}
})
}
/**多个方法的集合 */
init() {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
/** 初始化RouteMap属性 */
createRouteMap() {
// 遍历所有到路由规则，把路由规则解析成键值对到形式，存储到routerMap中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
/**
* 注册组件 router-link and router-view 组件
*
* Vue.component(id, [definition])
* @id 自定义组件名
* @definition 扩展过的构造器 / 选项对象 Vue.extend({ })
* 注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
* */
initComponents(Vue) {
// 创建router-link组件
Vue.component('router-link', {
// router-link 标签上存在的参数，并获取跳转路径
props: {
to: String,
},
render(h) {
// 将router-link 组件转化成 a 标签，href 为跳转路径，并为a标签添加点击事件，
return h('a', {
attrs: {
href: this.to
},
on: {
click: this.clickHandler
}
},
// 类似插槽，将route-link 标签的子元素，插入
[this.$slots.default])
},
methods: {
clickHandler(e) {
// history.pushState(状态对象, 页面标题, 跳转URL)
if (this.$router.options.mode === 'history') {
history.pushState({}, '', this.to)
} else {
window.location.hash = this.to
}
this.$router.data.current = this.to
// 路由跳转
// 阻止浏览器请求服务器
e.preventDefault()
}
}
})
// 创建router-view组件
const self = this
Vue.component('router-view', {
render(h) {
// 根据当前路径跳转路径对应的组件
const component = self.routeMap[self.data.current]
return h(component)
}
})
}
/**注册popstate方法 / 监听-浏览器历史的变化，改变Router-view 组件跳转 */
initEvent() {
/**
* history 模式
* target.addEventListener(type, listener, options);
*
* @target 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象
* @type 表示监听事件类型的字符串
* @listener 当所监听的事件类型触发时，会接收到一个事件通知对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
* @options 一个指定有关 listener 属性的可选参数对象。可用的选项如下：
* 1. capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发
* 2. once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
* 3. passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
* 4. mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 Boolean，表示 listener 被添加到 system group。
*/
if (this.options.mode === 'history') {
window.addEventListener('popstate', () => {
this.data.current = window.location.pathname
})
} else {
window.addEventListener('hashchange', () => {
this.data.current = window.location.hash.slice(1)
}, false)
}
}
}
2. 新建router/index
import Vue from 'vue'
// 此处为 手写Router
import VueRouter from './VueRouter'
Vue.use(VueRouter)
import Hello from '../pages/Hello'
import time from '../pages/time'
import date from '../pages/date'
import Index from '../pages/index'
const routes = [
{ path: '/', component: Index },
{ path: '/Hello', component: Hello },
{ path: '/time', component: time },
{ path: '/date', component: date },
]
const router = new VueRouter({
mode: 'hash', // hash模式
routes // short for `routes: routes`
})
export default router
需要总结当知识点：
1. this.$options 是什么？
2. _Vue.observable 内部原理是什么？
3. _Vue.mixin 什么情况下会用到
4. static 静态方法 和普通方法的区别，为什么static 中无法访问 普通方法？该如何访问
5. Vue.component 原理，render 具体实现了什么操作？
6. window.addEventListener 内部实现原理
7. hash 和 history的区别？ 为什么hash最后被history替换，好处是什么？
