效果图如下:
实现方法如下:
一级路由(personal.vue):
<template>
<div id="app">
<div>
<h4 class="routerStyle">
<router-link to="/personal/personalwork"><span>作品管理</span></router-link>
<router-link to="/personal/personalinvite"><span>邀请码管理</span></router-link></h4>
</div>
<!-- 一级路由出口 -->
<router-view />
</div>
</template>
<style>
/*****被选中路由高亮样式*********/
.active{
color: #ff9902;
border-bottom: 2px solid #ff9902;
}
</style>
二级路由(personal_invite.vue):
<template>
<div class="form-person">
<div class="route-btn"><router-link class="given-btn" to="/personal/personalinvite/inviten">未发放</router-link></div><div class="route-btn"><router-link class="give-btn" to="/personal/personalinvite/invitey">已发放</router-link></div>
<router-view/>
</div>
</template>
<style>
/*****被选中路由高亮样式*********/
.active {
width: 100%;
height: 100%;
display: inline-block;
background-color: #ff9902;
color: white;
}
</style>
路由表(router.js):
import personal from '@/pages/personal'
import personalwork from '@/pages/personal_work'
import personalinvite from '@/pages/personal_invite'
import inviten from '@/pages/personal_invite_n'
import invitey from '@/pages/personal_invite_y'
Vue.use(Router)
export default new Router({
linkActiveClass: 'active',
routes: [
{
path: '/',
component: parent,
children: [
{ path: '/', redirect: '/personal' },
{
path: '/personal',
component: personal,
meta: {
title: '个人中心',
requireAuth: true
},
children: [
{ path: '/personal', redirect: 'personalwork' },
{
path: '/personal/personalwork',
component: personalwork,
},
{
path: '/personal/personalinvite',
component: personalinvite,
children: [
{ path: '/personal/personalinvite', redirect: 'inviten' },
{
path: '/personal/personalinvite/inviten',
component: inviten,
},
{
path: '/personal/personalinvite/invitey',
component: invitey,
}
]
}
]
}
]
}
]
})