嵌套路由的實現(xiàn)思路(四步走)： 仿小米首頁中的tab切換

        應(yīng)用場景：
        在一級路由中某個部分，需要進行內(nèi)容的切換，而且切換的版塊排版上有很大的不同

        一、定義二級路由組件

            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配置，可以實現(xiàn)路由重定向
             在進入/index后，將把hash重新改變?yōu)?index/recommend,這樣就同時匹配到了第一個子路由，實現(xiàn)index初始化顯示時即能顯示recommend的內(nèi)容


             訪問一個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子路由的切換所展示的組件都會顯示在它內(nèi)部的router-view中
            <router-link to="/index/recommend" tag="li">推薦</router-link>