嵌套路由的实现思路(四步走)： 仿小米首页中的tab切换
应用场景：
在一级路由中某个部分，需要进行内容的切换，而且切换的版块排版上有很大的不同
一、定义二级路由组件
recommend.vue
phone.vue
ai.vue
tv.uve
image.png
二、在路由文件(router/index.js)中引入：
import recommend from '@/components/index/recommend'
import phone from '@/components/index/phone'
import ai from '@/components/index/ai'
import tv from '@/components/index/tv'
image.png
三、在index路由中添加嵌套路由配置
*** 通过redirect配置，可以实现路由重定向
在进入/index后，将把hash重新改变为/index/recommend,这样就同时匹配到了第一个子路由，实现index初始化显示时即能显示recommend的内容
{
path: '/index',
component: Index,
redirect: '/index/recommend',
children: [
{
path: 'recommend',
component: recommend
},
{
path: 'phone',
component: phone
},
{
path: 'ai',
component: ai
},
{
path: 'tv',
component: tv
}
]
}
image.png
四、在index.vue这个一级路由组件中添加<router-view>和<router-link>
index.vue子路由的切换所展示的组件都会显示在它内部的router-view中
<router-link to="/index/recommend" tag="li">推荐</router-link>
image.png
