嵌套路由的实现思路(四步走)： 仿小米首页中的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