5、vue项目：路由

如图：

 步骤：

1、新建文件夹

在 src 下：新建 router 文件夹，再在 router 下  新建  index.js

在 components 文件夹下，创建组建 About.vue    Home.vue

2、安装 router 插件：

控制台输入  npm i vue-router@3，在 package.json  文件夹中查看是否安装成功

 npm i vue-router@3

 3、index.js    创建路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
 import About from '@/components/About.vue'
 import Home from '@/components/Home.vue'

 Vue.use(VueRouter)


//  创建路由
 export default new VueRouter({
    routes:[
        {
            path:'/About',
            component:About
        },
        {
            path:'/Home',
            component:Home
        }
    ]
 })

4、About.vue    Home.vue 代码

<template>
  <h1>这是  About 页面</h1>
</template>

<script>
import About from '@/components/About.vue';

export default {
    name:About,
}
</script>

<style>

</style>

<template>
  <h1>这是   Home 页面</h1>
</template>

<script>
import Home from '@/components/Home.vue';

export default {
    name:Home,

}
</script>

<style>

</style>

5、main.js  

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

// 引入路由
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注意：router是关键
  router,
}).$mount('#app')

6、App.vue

<div class="left">

      <!-- router-link  是 router 的固定写法，等同于  a 标签，在页面解析时，会被自动转译成 a 标签 -->
      <!-- to="About"  告诉浏览器，当点击 About 文本内容时，获取  About 组件内容 -->
      <!-- active-class="active"  控制背景色，当用户点击 About 文本时，Home 当中的  active-class="active" 会被移除 -->
      <!-- 注意：在该切换效果中，被移除的项 是确实从后台中被删除的，即该路由切换实际是项目反复被删除和添加的过程 -->

      <router-link active-class="active" to="About">About</router-link>
      <router-link active-class="active" to="Home">Home</router-link>
    </div>

 <div class="right">
      <!-- 视图占位，用来展示 About  Home 的文本内容 -->
      <router-view></router-view>
    </div>

<template>
  <div class="w">
    <div class="left">

      <!-- router-link  是 router 的固定写法，等同于  a 标签，在页面解析时，会被自动转译成 a 标签 -->
      <!-- to="About"  告诉浏览器，当点击 About 文本内容时，获取  About 组件内容 -->
      <!-- active-class="active"  控制背景色，当用户点击 About 文本时，Home 当中的  active-class="active" 会被移除 -->
      <!-- 注意：在该切换效果中，被移除的项 是确实从后台中被删除的，即该路由切换实际是项目反复被删除和添加的过程 -->

      <router-link active-class="active" to="About">About</router-link>
      <router-link active-class="active" to="Home">Home</router-link>
    </div>
    <div class="right">
      <!-- 视图占位，用来展示 About  Home 的文本内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.w{
  width: 500px;
  height: 300px;
  background-color: #eee;
  border: 1px solid #000;
  box-sizing: border-box;
}

a{
  display: block;
  text-decoration: none;
  color: #000;
}
a:first-child{
  margin-top: 100px;
  margin-bottom: 20px;
}

.active{
  background-color: blue;
}


.left {
  float: left;
  width: 20%;
  height: 300px;
  border: 1px solid #000;
  box-sizing: border-box;
  text-align: center;
}

.right {
  width: 80%;
  height: 300px;
  text-align: center;
  margin-top: 120px;
  margin-left: 100px;
}
</style>

作者是前端初学者，谨在此记录学习过程，如有错误还请各位大佬不吝赐教指出~~~谢谢