嵌套路由的實(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>
Vue嵌套路由
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門灵嫌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壹罚,“玉大人,你說我怎么就攤上這事寿羞〔荩” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵绪穆,是天一觀的道長(zhǎng)辨泳。 經(jīng)常有香客問我,道長(zhǎng)玖院,這世上最難降的妖魔是什么菠红? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮难菌,結(jié)果婚禮上试溯,老公的妹妹穿的比我還像新娘。我一直安慰自己郊酒,他們只是感情好遇绞,可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著燎窘,像睡著了一般摹闽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褐健,一...
- 文/蒼蘭香墨 我猛地睜開眼务蝠,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了烛缔?” 一聲冷哼從身側(cè)響起馏段,我...
- 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎践瓷,沒想到半個(gè)月后院喜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡晕翠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年喷舀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淋肾。...
- 正文 年R本政府宣布碌尔,位于F島的核電站浇辜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏唾戚。R本人自食惡果不足惜柳洋,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叹坦。 院中可真熱鬧熊镣,春花似錦、人聲如沸募书。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽锐膜。三九已至,卻和暖如春弛房,著一層夾襖步出監(jiān)牢的瞬間道盏,已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像种远,于是被迫代替她去往敵國和親涩澡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 一級(jí)路由跳轉(zhuǎn)title變化 index.js里的路由配置規(guī)則 像這樣首頁跳轉(zhuǎn)到登錄同是一級(jí)路由跳轉(zhuǎn)時(shí)改變頁面的ti...
- 我的項(xiàng)目因?yàn)閷?duì)接其他項(xiàng)目的原因坠敷,沒有登錄頁面妙同,但是有登錄權(quán)限控制,所以home頁面首次進(jìn)入時(shí)沒有解析完用戶信息的情...
- 步驟:1、創(chuàng)建一個(gè)父路由對(duì)應(yīng)的組件User.vue限次。2芒涡、創(chuàng)建兩個(gè)子路由對(duì)應(yīng)的組件UserInfo.vue、User...
- 1卖漫、嵌套路由的了解 嵌套路由费尽,主要是由我們的頁面結(jié)構(gòu)所決定的,當(dāng)我們進(jìn)入一個(gè)頁面的時(shí)候羊始,如果此時(shí)下面還有一些分類導(dǎo)...