Vue嵌套路由

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

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

        一他嚷、定義二級(jí)路由組件

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


             訪問一個(gè)App磨总,一定會(huì)首先匹配到"/",而其實(shí)我們希望是'/index'匹配的首頁嗦明,所以加一個(gè)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這個(gè)一級(jí)路由組件中添加<router-view>和<router-link>
            
            index.vue子路由的切換所展示的組件都會(huì)顯示在它內(nèi)部的router-view中
            <router-link to="/index/recommend" tag="li">推薦</router-link>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚪燕,一起剝皮案震驚了整個(gè)濱河市娶牌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馆纳,老刑警劉巖诗良,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鲁驶,居然都是意外死亡鉴裹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門灵嫌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壹罚,“玉大人,你說我怎么就攤上這事寿羞〔荩” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵绪穆,是天一觀的道長(zhǎng)辨泳。 經(jīng)常有香客問我,道長(zhǎng)玖院,這世上最難降的妖魔是什么菠红? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮难菌,結(jié)果婚禮上试溯,老公的妹妹穿的比我還像新娘。我一直安慰自己郊酒,他們只是感情好遇绞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著燎窘,像睡著了一般摹闽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褐健,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天付鹿,我揣著相機(jī)與錄音,去河邊找鬼。 笑死舵匾,一個(gè)胖子當(dāng)著我的面吹牛俊抵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纽匙,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼务蝠,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了烛缔?” 一聲冷哼從身側(cè)響起馏段,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎践瓷,沒想到半個(gè)月后院喜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡晕翠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年喷舀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淋肾。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡硫麻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出樊卓,到底是詐尸還是另有隱情拿愧,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布碌尔,位于F島的核電站浇辜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏唾戚。R本人自食惡果不足惜柳洋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叹坦。 院中可真熱鬧熊镣,春花似錦、人聲如沸募书。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锐膜。三九已至,卻和暖如春弛房,著一層夾襖步出監(jiān)牢的瞬間道盏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荷逞,地道東北人媒咳。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像种远,于是被迫代替她去往敵國和親涩澡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容