最终效果:

vue 二级三级路由配置_html

二级嵌套三级index.js页面路由配置:

二级:在所在页面路由对象里,加children:[继续配置路径],页面path可以自己定义

三级:和二级一样

{
path: '/about',
name: 'about',
component: about,
redirect: '/about/home',
children: [
{
path: '/about/home',
name: 'home',
component: home,
},
{
path: '/about/news',
name: 'news',
component: news
},
{
path: '/about/project',
name: 'project',
component: project
},
{
path: '/about/user',
name: 'user',
component: user,
children: [
{
path: '/myphone', name: myphone, component: myphone
},
{
path: '/myname', name: myname, component: myname
},
]
},
]
},

二级跳转html代码:

<router-link to="/Baidusearch" class="navbar-brand">百度搜索</router-link>
<ul class="navbar-nav">
<li><router-link to="/game" class="nav-link">游戏</router-link></li>
<li><router-link to="/Tab" class="nav-link">选项卡</router-link></li>
<li><router-link to="/shopcar3" class="nav-link">购物车</router-link></li>
<li><router-link to="/about" class="nav-link">about</router-link></li>
</ul>
<ul class="navbar-nav ml-auto">
<li><router-link to="/linklogin" class="nav-link">登陆</router-link></li>
<li><router-link to="/register" class="nav-link">注册</router-link></li>
</ul>

三级跳转html代码:

<router-link tag="li" class="nav-link" to="/about/home">
<a class="list-group-item list-group-item-action">爱的小屋</a>
</router-link>
<router-link tag="li" class="nav-link" to="/about/news">
<a class="list-group-item list-group-item-action">个人新闻</a>
</router-link>
<router-link tag="li" class="nav-link" to="/about/project">
<a class="list-group-item list-group-item-action">我的项目</a>
</router-link>
<router-link tag="li" class="nav-link" to="/about/user">
<a class="list-group-item list-group-item-action">个人信息</a>
</router-link>