一级路由

1、安装依赖

yarn add vue-router

2、配置一级路由

//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home/Index'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: ()=>import("../views/About/Index"),  //异步路由
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

//App.vue
<template>
  <div id="app">
     <router-link to="/Home"></router-link>
     <router-link to="/About"></router-link>
         <keep-alive>
       <router-view></router-view>
         </keep-alive>
  </div>
</template>

//main.js
import router from './router'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')