下面是一段简单的代码，通过这段代码分析一下如何去实现一个自己的 vue-router，并且思考下面两个问题：

思考1：为什么要在创建 vue 实例时指定 router？ 思考2：如何实现 router-view 和 router-link 这两个组件以及这两个组件的作用是什么？

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  4. const layout = () => import('@/pages/layout')
  5. const home = () => import('@/pages/home')
  7. Vue.use(Router)
  9. const redirect = {
  10.   path: '*',
  11.   redirect: '/'
  12. }
  14. let router = new Router({
  15.   mode: 'history',
  16.   routes: [
  17.     {
  18.       path: '/',
  19.       name: 'layout',
  20.       component: layout,
  21.       redirect: '/home',
  22.       children: [
  23.         {
  24.           path: 'home',
  25.           name: 'home',
  26.           component: home,
  27.           meta: {
  28.             title: '首页',
  29.             noLogin: true
  30.           }
  31.         }
  32.       ]
  33.     },
  34.     redirect
  35.   ]
  36. })
  38. export default router
  40. // login.vue
  41. <router-link :to="{name: 'home'}"></router-link>
  43. // app.vue
  44. <router-view/>
  46. // main.js
  47. import router from './router'
  49. new Vue({
  50.   el: '#app',
  51.   router,
  52.   store,
  53.   components: { App },
  54.   template: '<App/>'
  55. })

经过分析我们得出 Vue Router 需要满足下面四个基本功能：

  • 作为 Vue 插件 — 实现 install 方法
  • 监听url变化，渲染对应的组件
  • 路由配置解析，{ path: '/', component: 'home'} => '/' —> home
  • 实现两个全局组件：router-link、route-view

实现插件功能

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

  1. // 实现 install 方法
  2. VueRouter.install = function(Vue) {
  3.   // 全局混入
  4.   Vue.mixin({
  5.     beforeCreate() {
  6.       // this 是 Vue 实例
  7.       if (this.$options.router) {
  8.         // 仅在根组件执行一次
  9.         Vue.prototype.$router = this.$options.router;
  10.         this.$options.router.init();
  11.       }
  12.     }
  13.   });
  14. };

创建 Router 类

  1. import Vue from "vue";
  3. class VueRouter {
  4.   constructor(options) {
  5.     this.$options = options;
  6.     this.routeMap = {};
  7.     // 通过 Vue 实现路由响应式，所以 Vue Router 只能用于 Vue 中，它们之间是强绑定的
  8.     this.app = new Vue({
  9.       data: {
  10.         current: "/"
  11.       }
  12.     });
  13.   }
  15.   init() {
  16.     this.bindEvents();
  17.     this.createRouteMap(this.$options);
  18.     this.initComponent();
  19.   }
  21.   // 监听url变化，渲染对应的组件
  22.   bindEvents() {
  23.     window.addEventListener("load", this.onHashChange.bind(this));
  24.     window.addEventListener("hashchange", this.onHashChange.bind(this));
  25.   }
  27.   // hash 值改变时，current 值也跟着改变 
  28.   onHashChange() {
  29.     this.app.current = window.location.hash.slice(1) || "/";
  30.   }
  32.   // 解析路由配置
  33.   createRouteMap(options) {
  34.     options.routes.forEach(item => {
  35.       this.routeMap[item.path] = item.component;
  36.     });
  37.   }
  39.   // 实现两个全局组件 router-link、router-view，当组件实例中的 current 变化时，这两个全局组件都会重新渲染
  40.   initComponent() {
  41.     Vue.component("router-link", {
  42.       props: { to: String },
  43.       render(h) {
  44.         // h(tag, data, children)
  45.         return h("a", { attrs: { href: "#" + this.to } }, [
  46.           this.$slots.default
  47.         ]);
  48.       }
  49.     });
  51.     Vue.component("router-view", {
  52.       // 使用箭头函数, 通过 this 获取 routeMap 中对应 current 的组件
  53.       render: h => {
  54.         const comp = this.routeMap[this.app.current];
  55.         return h(comp);
  56.       }
  57.     });
  58.   }
  59. }

思考解答

  1. // 思考1
  2. 保证通过router对象仅在根组件的时候挂载和执行init方法
  4. // 思考2
  5. 使用 Vue.component 注册为全局组件
  7. router-link：改变 hash 值，触发浏览器的历史状态管理
  9. route-view：根据 hash 值，渲染对应的组件

完整代码

  1. import Home from "./views/Home";
  2. import About from "./views/About";
  3. import Vue from "vue";
  5. class VueRouter {
  6.   constructor(options) {
  7.     this.$options = options;
  8.     this.routeMap = {};
  10.     // 通过 Vue 实现路由响应式，所以 Vue Router 只能用于 Vue 中
  11.     this.app = new Vue({
  12.       data: {
  13.         current: "/"
  14.       }
  15.     });
  16.   }
  18.   init() {
  19.     this.bindEvents();
  20.     this.createRouteMap(this.$options);
  21.     this.initComponent();
  22.   }
  24.   // 监听url变化，渲染对应的组件
  25.   bindEvents() {
  26.     window.addEventListener("load", this.onHashChange.bind(this));
  27.     window.addEventListener("hashchange", this.onHashChange.bind(this));
  28.   }
  30.   onHashChange() {
  31.     this.app.current = window.location.hash.slice(1) || "/";
  32.   }
  34.   // 解析路由配置
  35.   createRouteMap(options) {
  36.     options.routes.forEach(item => {
  37.       this.routeMap[item.path] = item.component;
  38.     });
  39.   }
  41.   // 实现两个全局组件 router-link、router-view，当组件实例中的 current 变化时，这两个全局组件都会重新渲染
  42.   initComponent() {
  43.     Vue.component("router-link", {
  44.       props: { to: String },
  45.       render(h) {
  46.         // h(tag, data, children)
  47.         return h("a", { attrs: { href: "#" + this.to } }, [
  48.           this.$slots.default
  49.         ]);
  50.       }
  51.     });
  53.     Vue.component("router-view", {
  54.       // 使用箭头函数, 通过 this 获取 routeMap 中对应 current 的组件
  55.       render: h => {
  56.         const comp = this.routeMap[this.app.current];
  57.         return h(comp);
  58.       }
  59.     });
  60.   }
  61. }
  63. // 实现 install 方法
  64. VueRouter.install = function(Vue) {
  65.   // 全局混入
  66.   Vue.mixin({
  67.     beforeCreate() {
  68.       // this 是 Vue 实例
  69.       if (this.$options.router) {
  70.         // 仅在根实例执行一次 （main.js中 new Vue 时）
  71.         Vue.prototype.$router = this.$options.router;
  72.         this.$options.router.init();
  73.       }
  74.     }
  75.   });
  76. };
  78. Vue.use(VueRouter);
  80. export default new VueRouter({
  81.   routes: [
  82.     { path: "/", component: Home }, 
  83.     { path: "/about", component: About }
  84.   ]
  85. });