Vue2使用vue-router初始化项目

**项目版本号**
vue@2.6.14
vue-router@3.6.5

1. 在components中创建Main.vue文件，输入页面要显示的内容：

<template>
    <h1>这是 Main 组件</h1>
</template>

<script>
export default {
    name: 'thisMain'
}
</script>

<style scoped>

</style>

2. 安装vue-router：npm install [email protected]，根据你自己vue版本号安装对应的router，查看当前项目vue版本命令 npm list vue
3. 在项目src文件夹下，创建router文件夹以及index.js文件，写入一下内容：

import Vue from 'vue'
import Router from 'vue-router'
import thisMain from '@/components/Main'

Vue.use(Router)

export const routerMap = [
    {
        path: '/main',
        component: thisMain,
        children: [
        ]
    }
]

const router = new Router({
    routes: routerMap
})

export default router

4. App.vue里面使用router-view

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

5. main.js的app里面加入router:

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')