详解vue-router实现原理-history篇

popstate

MDN
具体的详解可以看mdn，大致就是当浏览器前进后退的时候会促发popstate事件，通过监听popstate事件来根据地址显示对应的组件。

VueRouter类包含的属性和方法

我们可以通过vue- router的调用来分析他具体包括的属性和方法。

// router.js
import Vue from 'vue'
import VueRouter from '../vueroute/index.js'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// mian.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
   
  router,
  render: h => h(App)
}).$mount('#app')

从以上调用可以分析出VueRouter类需要以下属性和方法

VueRouter

属性	类型	用途
options	Object	用于保存初始化VueRouter时传入的options对象
data.current	String	响应式数据，用于存放当前页面的路由地址
routeMap	Object	用于存放传入的路由规则，键名为路由地址，键值为对应的组件

方法	用途
install	静态方法，用于实现vue插件机制，将VueRouter注册到Vue上
init	将各个初始化方法的调用集中在一起
initRouteMap	初始化routeMap对象
initComponents	初始化routerLink和routerView组件
initEvents	初始化监听popstate事件

install 方法的实现

let _Vue = null;
export default class VueRouter {
   
  static install (Vue) {
   
    // 1.判断当前插件是否已经被安装
    if (VueRouter.install.installed)