vue動態(tài)路由與vue路由傳參

動態(tài)路由:

  當我們很多個頁面或者組件都要被很多次重復利用的時候妙真,我們的路由都指向同一個組件蝠嘉,這時候從不同組件進入一個"共用"的組件最疆,并且還要傳參數(shù),渲染不同的數(shù)據(jù)

  這就要用到動態(tài)路由跟路由傳參了蚤告!

首先我們來了解下router-link這個組件:

  簡單來說努酸,它是個導航器,利用to屬性導航到目標組件杜恰,并且在渲染的時候會自動生成一個a標簽获诈,當然官方也有說明,加個tag標簽屬性就可以渲染不同的標簽心褐,可以瀏覽器端查看到

  并且當一個導航器被激活的時候舔涎,會自動加上一個css的激活樣式,可以全局在路由配置中設置linkActiveClass屬性檬寂,屬性名就是樣式css名终抽,一般寫為active

  現(xiàn)在基本了解了router-link戳表,先講一下動態(tài)路由配置吧

我們在配置路由的時候桶至,將目標組件的路徑先配置好,如:


比如多個路由都要進入List組件匾旭,這時候在配置路由路徑后加個:id(id可隨便取名镣屹,標識),這個屬性id可以在$route.params.id中獲取,例如:


當前這個child組件要進入价涝,以上配置的id就等于on女蜈;這時候在List組件中打印出$route.params.id就可以得到這個屬性值on

這個時候,不同組件進入同一目標組件時就可以得到標識跟備注了色瘩,也可以利用這個來傳遞一些正常的參數(shù)

接著往下看伪窖,帶參數(shù)的路由,跟獲取傳來的參數(shù)值

當router-link被激活點擊時居兆,會將當前的to的值push到router對象當中(路由棧),所以這個值可以是string也可以是obj

傳參數(shù)的時候覆山,我們就寫成對象的形式,用到v-bind的js表達式


此時整個的理解可以為:我是child組件過來的泥栖,而且我還帶來了我的名字簇宽,我叫child

在List組件當中去獲取這個參數(shù)值跟id的值



如果是不同的組件過來的勋篓,可以設置不同的id值,只要在目標組件獲取屬性id的值就可以了魏割,參數(shù)就利用query.屬性值來獲取

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末譬嚣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子钞它,更是在濱河造成了極大的恐慌拜银,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件须揣,死亡現(xiàn)場離奇詭異盐股,居然都是意外死亡,警方通過查閱死者的電腦和手機耻卡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門疯汁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卵酪,你說我怎么就攤上這事幌蚊。” “怎么了溃卡?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵溢豆,是天一觀的道長。 經常有香客問我瘸羡,道長漩仙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任犹赖,我火速辦了婚禮队他,結果婚禮上,老公的妹妹穿的比我還像新娘峻村。我一直安慰自己麸折,他們只是感情好,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布粘昨。 她就那樣靜靜地躺著垢啼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪张肾。 梳的紋絲不亂的頭發(fā)上芭析,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天,我揣著相機與錄音吞瞪,去河邊找鬼馁启。 笑死,一個胖子當著我的面吹牛尸饺,可吹牛的內容都是我干的进统。 我是一名探鬼主播助币,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼螟碎!你這毒婦竟也來了眉菱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤掉分,失蹤者是張志新(化名)和其女友劉穎俭缓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥郭,經...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡华坦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了不从。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惜姐。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖椿息,靈堂內的尸體忽然破棺而出歹袁,到底是詐尸還是另有隱情,我是刑警寧澤寝优,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布条舔,位于F島的核電站,受9級特大地震影響乏矾,放射性物質發(fā)生泄漏孟抗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一钻心、第九天 我趴在偏房一處隱蔽的房頂上張望凄硼。 院中可真熱鬧,春花似錦扔役、人聲如沸帆喇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至预皇,卻和暖如春侈玄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吟温。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工序仙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鲁豪。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓潘悼,卻偏偏與公主長得像律秃,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子治唤,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內容