目的：学习搭建vue2项目基础的vue路由和嵌套路由
1.npm 安装 router

npm install vue-router@3.6.5

2.src下新建文件夹router文件夹以及文件index.js

index.js

import Vue from 'vue'
import VueRouter from "vue-router"
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
// 1、 创建路由组件
// 2 路由与组件映射
const routes = [{path: '/', component: Main, children: [// 子路由{ path: '/home', component: Home },{ path: '/user', component: User },]},// { path: '/home', component: Home },// { path: '/user', component: User },
]
const router = new VueRouter({routes
})
export default router

3. Home.vue User.vue Main.vue 三个页面都是一样的
   

<template><h1>我是home</h1>
</template>
<script>
export default {data() {return {}}
}
</script>

4. main.js 挂载

import Vue from 'vue'
import App from './App.vue'
// import ElementUI from 'element-ui';
import { Button, Row } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.config.productionTip = false
// Vue.use(ElementUI);
Vue.use(Button);
Vue.use(Row);
new Vue({router,render: h => h(App),
}).$mount('#app')

注意： 该demo命名方式会导致eslint报错，需要在vue.config.js加入lintOnSave: false

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false // 关闭eslint 校验
})