在开始探究VueRouter前首先我们得先来简单回顾下VueRouter的的基本使用，如果连最基本的使用都不会，何谈探究更深入的东西呢？

初始化项目

安装vue-cli：

npm install @vue/cli -g

查看版本：

vue --version

我这里输出的是3.10.0，版本号可能存在不同，只要不报错就说明安装成功了。

创建项目：

vue create vue-router

选择手动选择特性

因为我们主要是来探究VueRouter所以这里我们只选择Babel和VueRouter即可。

因为代码可能会用到.vue文件，babel会通过vue-loader对.vue组件进行编译，Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。

路由模式这里选择使用history

配置文件选择单独的

将已选项保存为一个将来可复用的 preset?选择N。因为每个项目可能需求不一样。

打开新建项目/src/router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [{
      path: 'info',
      component: {
        render(h) {
          return <h1>基本信息</h1>
          // return h('h1', null, '基本信息')
        }
      }
    }, {
      path: 'history',
      component: {
        render(h) {
          return <h1>工作履历</h1>
        }
      }
    }]
  }
]

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

export default router