Vue实现头部导航

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
        }
      ]
    }
  ]
  
})

4. App.vue 中只留一个路由出口，App内的样式全部删除

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

5. 配置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>