Vue嵌套路由

    嵌套路由的实现思路(四步走)： 仿小米首页中的tab切换

        应用场景：
        在一级路由中某个部分，需要进行内容的切换，而且切换的版块排版上有很大的不同

        一、定义二级路由组件

            recommend.vue
            phone.vue
            ai.vue
            tv.uve

        二、在路由文件(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' 

        三、在index路由中添加嵌套路由配置

          *** 通过redirect配置，可以实现路由重定向
             在进入/index后，将把hash重新改变为/index/recommend,这样就同时匹配到了第一个子路由，实现index初始化显示时即能显示recommend的内容


             访问一个App，一定会首先匹配到"/",而其实我们希望是'/index'匹配的首页，所以加一个redirect重定向
             const routes = [
                {
                    path: '/',
                    redirect: '/index'
                },
                {
                    path: '/index',
                    component: Index,
                    redirect: '/index/recommend',
                    children: [
                        {
                            path: 'recommend',
                            component: recommend
                        },
                        {
                            path: 'phone',
                            component: phone
                        },
                        {
                            path: 'ai',
                            component: ai
                        },
                        {
                            path: 'tv',
                            component: tv
                        }
                    ]
                }
             ]
            
        
        四、在index.vue这个一级路由组件中添加<router-view>和<router-link>
            
            index.vue子路由的切换所展示的组件都会显示在它内部的router-view中
            <router-link to="/index/recommend" tag="li">推荐</router-link>