1.结构配置：
<template>
<div class="index">
<ul>
<li>
<router-link to="/Home"> <img src="../assets/logo-ea5.png" alt=""></router-link>
</li>
<li><router-link to="/Artists">歌手</router-link></li>
<li><router-link to="/Listcate">榜单</router-link></li>
<li><router-link to="/Ucenter">我的</router-link></li>
<li><router-link to="/Search">搜索</router-link></li>
</ul>
<router-view />
</div>
</template>
<script>
</script>
<style scoped>
.index img {
26px;
height: 26px;
}
.index ul {
display: flex;
height: 50px;
line-height: 50px;
background: #f9f9f9;
}
.index ul li {
flex: 1;
text-align: center;
}
.index ul li a {
font-size: 16px;
color: #999;
}
</style>
2.路由配置：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from '@/pages/home'
import Artists from '@/pages/artists'
import Search from '@/pages/search'
import Listcate from '@/pages/listcate'
import Ucenter from '@/pages/ucenter'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Index',
component: Index,
children: [{
path: '/Home',
component: Home
},{
path: '/Artists',
component: Artists
},{
path: '/Search',
component: Search
},{
path: '/Listcate',
component: Listcate
},{
path: '/Ucenter',
component: Ucenter
}
]
}]
})