思路

路由文件如下，routes里面是层级结构，而我们的url地址为了方便匹配，所以第一步将层级结构拉平到一维数组里方便后续匹配，变为 ['/','/home','/home/info']

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "/info",
          component: Detail,
        },
      ],
    }
  ],
});

根据 mode 参数，创建 hash路由和html5路由
vue插件都需要提供install方法，里面使用Vue.mixin混入beforeCreate方法，在每个子组件中能获取到路由配置
通过url就能匹配出当前需要的路由组件列表，因为比如渲染 '/a/b/c' 这个地址，其实是需要 a,b,c三个地址对应到的组件
上述组件已经获取到了，同时注册监听事件，hashchange 和 popstate，通过浏览器前进后退按钮也能获得对应组件
上述组件获得后，为了使得 router-view 中render能响应式渲染，所以需要将上述组件列表，放到对象中$route做成响应式，这样 router-view 中就能自动渲染变化了
注册 router-link 和 router-view 全局组件
router-link 是点击跳转，只需要调用不用路由的push方法，push方法里面会去改变响应式$route
router-view 中使用函数式组件，定义functional和render方法，获取到$route中匹配的组件列表，但是这个需要知道那个组件才是当前需要用到的，所以在递归父组件，根据索引取得组件渲染
不论hash还是html5路由方式，都是主动渲染组件，并不是通过hashchange和popstate事件监听后渲染的，因为popstate不能监听到pushstate改变后的事件，所以pushstate仅作为修改历史记录的作用，虽然改变hash的方式会触发hashchange，但是判断到同一个路由之后，就不会渲染

vue-router浅显原理

思路