詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
1. router-link
1. 不帶參數(shù) <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建議用name // 注意:router-link中鏈接如果是'/'開始就是從根路由開始,如果開始不帶'/',則從當(dāng)前路由開始。 2.帶參數(shù) <router-link :to="{name:'home', params: {id:1}}"> // params傳參數(shù) (類似post) // 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失 // 配置path,刷新頁(yè)面id會(huì)保留 // html 取參 $route.params.id // script 取參 this.$route.params.id <router-link :to="{name:'home', query: {id:1}}"> // query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù)) // 路由可不配置 // html 取參 $route.query.id // script 取參 this.$route.query.id
2. 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 ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失 // 配置path,刷新頁(yè)面id會(huì)保留 // html 取參 $route.params.id // script 取參 this.$route.params.id 4. query和params區(qū)別 query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在 params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失
3. this.$router.replace() (用法同上,push)
4. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面,n可為正整數(shù)或負(fù)整數(shù)
ps : 區(qū)別
this.$router.push
跳轉(zhuǎn)到指定url路徑,并想history棧中添加一個(gè)記錄,點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面
this.$router.replace
跳轉(zhuǎn)到指定url路徑,但是history棧中不會(huì)有記錄,點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上上個(gè)頁(yè)面 (就是直接替換了當(dāng)前頁(yè)面)
this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面,n可為正整數(shù)或負(fù)整數(shù)
總結(jié)
以上所述是小編給大家介紹的詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù)),希望對(duì)大家有所幫助,如果大家有人疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
VUE安裝依賴時(shí)報(bào)錯(cuò):npm ERR! code ERESOLVE的解決
在使用npm安裝項(xiàng)目依賴時(shí),有時(shí)會(huì)遇到錯(cuò)誤信息 “npm ERR! code ERESOLVE”,本文就來介紹一下VUE安裝依賴時(shí)報(bào)錯(cuò)的解決,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07解決iView中時(shí)間控件選擇的時(shí)間總是少一天的問題
下面小編就為大家分享一篇解決iView中時(shí)間控件選擇的時(shí)間總是少一天的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03詳解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
這篇文章主要介紹了詳解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明
這篇文章主要介紹了Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04ant?design?vue?pro?支持多頁(yè)簽?zāi)J絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁(yè)簽?zāi)J絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11