vue中路由跳轉(zhuǎn)的方式有哪些你知道嗎
第一種方式:router-link (聲明式路由)
1. 不帶參數(shù)
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意:router-link中鏈接如果是'/'開(kāi)始就是從根路由開(kāi)始,如果開(kāi)始不帶'/',則從當(dāng)前路由開(kāi)始。
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}}">
第二種方式:router.push(編程式路由)
// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù),變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path,params 會(huì)被忽略,上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法,你需要提供路由的 name 或手寫(xiě)完整的帶有參數(shù)的 path:
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
第三種方式: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ì)消失
**注意:獲取路由上面的參數(shù),用的是$route,后面沒(méi)有r**
第四種方式:this.$router.replace() (用法同上,push)
第五種方式: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ù)
params是路由的一部分,必須要有。query是拼接在url后面的參數(shù),沒(méi)有也沒(méi)關(guān)系。
params一旦設(shè)置在路由,params就是路由的一部分,如果這個(gè)路由有params傳參,但是在跳轉(zhuǎn)的時(shí)候沒(méi)有傳這個(gè)參數(shù),會(huì)導(dǎo)致跳轉(zhuǎn)失敗或者頁(yè)面會(huì)沒(méi)有內(nèi)容。
params、query不設(shè)置也可以傳參,但是params不設(shè)置的時(shí)候,刷新頁(yè)面或者返回參數(shù)會(huì)丟失,
兩者都可以傳遞參數(shù),區(qū)別是什么?
query 傳參配置的是path,而params傳參配置的是name,在params中配置path無(wú)效
query在路由配置不需要設(shè)置參數(shù),而params必須設(shè)置
query傳遞的參數(shù)會(huì)顯示在地址欄中
params傳參刷新會(huì)無(wú)效,但是query會(huì)保存?zhèn)鬟f過(guò)來(lái)的值,刷新不變
參考:
http://m.fzitv.net/article/183611.htm
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問(wèn)題
這篇文章主要介紹了解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
一次vue項(xiàng)目?jī)?yōu)化的實(shí)際操作記錄
用vue開(kāi)發(fā)項(xiàng)目上線以后,發(fā)現(xiàn)首頁(yè)加載速度非常慢,如果項(xiàng)目比較大,甚至可能出現(xiàn)10s以上的等待,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目?jī)?yōu)化的相關(guān)資料,需要的朋友可以參考下2022-09-09
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
解決vue-cli中stylus無(wú)法使用的問(wèn)題方法
這篇文章主要介紹了解決vue-cli中stylus無(wú)法使用的問(wèn)題方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
Vue實(shí)現(xiàn)可復(fù)用輪播組件的方法
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可復(fù)用輪播組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用
這篇文章主要介紹了vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)
這篇文章主要介紹了vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說(shuō)是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04
springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05

