「进阶篇」Vue Router 核心原理的 5 个问题你会了吗？

前言

此篇为进阶篇，希望读者有 Vue.js，Vue Router 的使用经验，并对 Vue.js 核心原理有简单了解；

不会大篇幅手撕源码，会贴最核心的源码，对应的官方仓库源码地址会放到超上，可以配合着看；

对应的源码版本是 3.5.3，也就是 Vue.js 2.x 对应的 Vue Router 最新版本；

Vue Router 是标准写法，为了简单，下面会简称 router。

本文将用以下问题为线索展开讲 router 的原理：

1. $router 和 $route 哪来的
2. router 怎样知道要渲染哪个组件
3. this.$router.push 调用了什么原生 API
4. router-view 渲染的视图是怎样被更新的
5. router 怎样知道要切换视图的

文末有总结大图

以下是本文使用的简单例子：

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

new Vue({
  el: '#app',
  // 挂载 Vue Router 实例
  router,
  components: { App },
  template: '<App/>'
})

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Home1 from '@/components/Home1'

// 使用 Vue Router 插件
Vue.use(Router)
// 创建 Vue Router 实例
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      children: [
        {
          path: 'home1',
          name: 'Home1',
          component: Home1
        }
      ]
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
// App.vue
<template>
  <div id="app">
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
    <router-link to="/home/home1">Go to Home1</router-link>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

页面表现举例：

$router 和 $route 哪来的

我们在组件里使用 this.$r$