持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情
前情提要
- 之前已经讲过前端路由基本功能的实现分析，那么咱们今天开始动手实现history模式的路由。
- 首先我们通过vue-cli创建一个vue的项目。
- 然后我们在src目录下创建一个router的文件夹，然后在文件夹下创建一个index.js的文件
- 最后让我们开始吧...
history模式具体实现
- class类
因为我们后来需要使用Vue构造函数，所以我们需要将Vue实例记录到全局变量
let _Vue = null;
export default class Router {
// 该方法是用来向vue实例挂载router实例和router-link以及router-view组件的
// 但是在项目运行过程中会多次运行该方法，而实例只需要挂载一次即可，因此我们需要做个判断，当该类的静态方法中存在时便直接返回。
static install(Vue) {
// 判断是否已经被执行
if (Router.install.installed) return;
// 首次执行之后将installed属性置为true
Router.install.installed = true;
_Vue = Vue;
// 此处我们需要将router挂载到vue的原型上。但是如果我们不使用混入则我们在执行this.$options.router时，this指向的是类本身。这显然不是我们想要的，所以我们需要通过混入，以及在beforeCreate生命周期钩子中执行在vue原型上挂载$router操作。
_Vue.mixin({
beforeCreate() {
// 为了保证执行一次就行了
if (this.$options.router) {
_Vue.prototype.$router = this.$options.router;
// 此处也可以直接写成：this.createRouteMap();this.initComponents(_Vue);
// 用来初始化组件，和routeMap对象。
this.$options.router.init();
}
}
})
}
// 构造函数，初始化options和routeMap以及data属性
constructor(options) {
// 实例化对象时传入的路由配置信息对象
this.options = options；
// 初始化路由地址和组件的映射关系
this.routeMap = {}；
// 由于data代表的是当前路由，所以我们需要通过Vue提供的observable方法来将data构造成响应式属性。
this.data = _Vue.observable({
current: '/'
})
}
// 初始化
init() {
this.createdRouteMap();
this.initComponents(_Vue);
}
// 根据路由配置信息表得到路由和组件的映射关系
createRouteMap() {
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component;
})
}
// 生成路由所需的公共组件：router-link
// 根据公共组件router-link，可以看出其接受一个props：to
// 同时也运行自定义内容。
// 因此得到如下的组件，通过slot插槽来实现公共组件的挂载。
initComponents(Vue) {
Vue.component('router-link', {
props: {
to: String
},
template: '<a :href="to"><slot></slot></a>'
})
}
}
总结
- 好了，然后就可以替换项目中引入的vue-router插件了。然后跑起来试一下...
- 不出意外的话你会得到一个惊喜...
