最终效果：
二级嵌套三级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>
标签：about,vue,name,component,myname,路由,home,path,三级 From： https://blog.51cto.com/u_12422954/5986001