Vue 路由跳轉(zhuǎn)的幾種方式

1.0 router-link

1. 不帶參數(shù)
    <router-link :to="{name:'home'}"> 
   <router-link :to="{path:'/home'}"> //name,path都行, 建議用name 
   // 注意:router-link中鏈接如果是'/'開始就是從根路由開始矩欠,如果開始不帶'/'紫新,則從當前路由開始。
2.帶參數(shù)
    <router-link :to="{name:'home', params: {id:1}}"> 
   // params傳參數(shù) (類似post)
   // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
   // 不配置path ,第一次可請求,刷新頁面id會消失
   // 配置path,刷新頁面id會保留
   // html 取參 $route.params.id
   // script 取參 this.$route.params.id
   <router-link :to="{name:'home', query: {id:1}}"> 
   // query傳參數(shù) (類似get,url后面會顯示參數(shù))
   // 路由可不配置
   // html 取參 $route.query.id
   // script 取參 this.$route.query.id

2.0 this.$router.push() (函數(shù)里面調(diào)用)

1. 不帶參數(shù)
     this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
2. query傳參 
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    // html 取參 $route.query.id
    // script 取參 this.$route.query.id
3. params傳參
     this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
  
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可請求,刷新頁面id會消失
    // 配置path,刷新頁面id會保留
    // html 取參 $route.params.id
    // script 取參 this.$route.params.id
4. query和params區(qū)別
    query類似 get, 跳轉(zhuǎn)之后頁面 url后面會拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在
     params類似 post, 跳轉(zhuǎn)之后頁面 url后面不會拼接參數(shù) , 但是刷新頁面id 會消失

3.0 this.$router.replace() (用法同上,push)

4.0 this.$router.go(n) ()

this.$router.go(n) ()

向前或者向后跳轉(zhuǎn)n個頁面称诗,n可為正整數(shù)或負整數(shù) ps : 區(qū)別

this.$router.push   //跳轉(zhuǎn)到指定url路徑,并想history棧中添加一個記錄害幅,點擊后退會返回到上一個頁面

this.$router.replace  //跳轉(zhuǎn)到指定url路徑练慕,但是history棧中不會有記錄晕换,點擊返回會跳轉(zhuǎn)到上上個頁面 (就是直接替換了當前頁面)

this.$router.go(n)  //向前或者向后跳轉(zhuǎn)n個頁面,n可為正整數(shù)或負整數(shù)
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贺待,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子呜舒,更是在濱河造成了極大的恐慌,老刑警劉巖笨奠,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袭蝗,死亡現(xiàn)場離奇詭異唤殴,居然都是意外死亡,警方通過查閱死者的電腦和手機到腥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門朵逝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人乡范,你說我怎么就攤上這事配名。” “怎么了晋辆?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵渠脉,是天一觀的道長。 經(jīng)常有香客問我瓶佳,道長芋膘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任霸饲,我火速辦了婚禮为朋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厚脉。我一直安慰自己习寸,他們只是感情好,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布傻工。 她就那樣靜靜地躺著霞溪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪精钮。 梳的紋絲不亂的頭發(fā)上威鹿,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天剃斧,我揣著相機與錄音轨香,去河邊找鬼。 笑死幼东,一個胖子當著我的面吹牛臂容,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播根蟹,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼脓杉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了简逮?” 一聲冷哼從身側(cè)響起球散,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎散庶,沒想到半個月后蕉堰,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凌净,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年屋讶,在試婚紗的時候發(fā)現(xiàn)自己被綠了冰寻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡皿渗,死狀恐怖斩芭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情乐疆,我是刑警寧澤划乖,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站挤土,受9級特大地震影響迁筛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜耕挨,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一细卧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧筒占,春花似錦贪庙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奏窑,卻和暖如春导披,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背埃唯。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工撩匕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人墨叛。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓止毕,卻偏偏與公主長得像,于是被迫代替她去往敵國和親漠趁。 傳聞我的和親對象是個殘疾皇子扁凛,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

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