1. views文件下创立 Layout.vue ，Mine.vue, Search.vue, Topic.vue组件
  2. 配置路由，Layout组件是入口文件，其余组件作为Layout组件的子组件
  3. 配置点击高亮--> linkActiveClass : "active", 上代码
const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  linkActiveClass: "active",   //配置点击高亮  routes: [{      path: "/",      name: "Layout",      component: Layout,      children: [{          path: '/',          name: 'Home',          component: Home        },        {          path: 'mine',          name: 'mine',          component: Mine        },        {          path: 'search',          name: 'search',          component: Search        },        {          path: 'topic',          name: 'topic',          component: Topic        }      ]    }  ]  })
  1. App.vue 中只留一个路由进口，App内的款式全副删除
<template>             <div id="app">              <router-view></router-view>              </div></template>
  1. 配置Layout组件显示路由
<template>    <div>        <ul class="top-nav">            <li>                <router-link exact to="/">首页</router-link>             </li>            <li>                <router-link to="/mine">我的</router-link>            </li>            <li>                <router-link :to="{name:'search'}">搜寻</router-link>             </li>            <li>                <router-link :to="{name:'topic'}">榜单</router-link>             </li>        </ul>        <router-view/>    </div></template><script>export default {    name:"Layout",}</script><style lang="less" scoped>.top-nav {    display: flex;    background: #fff;    li {        list-style: none;        flex: 1;        text-align: center;        padding-top: 10px;        a {            text-decoration: none;            display: block;            padding-bottom: 8px;        }        .active {            border-bottom: 2px solid #ff0000;        }    }}</style>