vue 路由跳轉(zhuǎn)四種方式實踐案例 (帶參數(shù))
更新時間：2025年05月21日 09:53:26 作者：Linux小百科
本文詳細(xì)介紹了Vue中通過$router對象實現(xiàn)的四種路由跳轉(zhuǎn)方法：router-link的使用、this.$router.push()和this.$router.replace(),以及參數(shù)傳遞的query與params區(qū)別,感興趣的朋友跟隨小編一起看看吧
之前給大家介紹過詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù)) ，今天在通過示例代碼給大家科普下關(guān)于vue 路由跳轉(zhuǎn)的相關(guān)知識。
本文介紹了vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))，本文通過實例代碼給大家介紹的詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
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 ,第一次可請求,刷新頁面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.id2. 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.id3. 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.id4. query和params區(qū)別
query類似 get, 跳轉(zhuǎn)之后頁面 url后面會拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在
params類似 post, 跳轉(zhuǎn)之后頁面 url后面不會拼接參數(shù) , 但是刷新頁面id 會消失。
3. this.$router.replace()
(用法同上,push)
4. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負(fù)整數(shù)。
到此這篇關(guān)于詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))的文章就介紹到這了,更多相關(guān)vue 路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實例詳解(params/query)
- Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
- vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
- 詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
- vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉(zhuǎn)的步驟和報錯
- uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)
- Vue路由跳轉(zhuǎn)的5種方式及擴展
- vue項目實現(xiàn)路由跳轉(zhuǎn)到新頁面,返回舊頁面,保留之前的數(shù)據(jù)記錄(操作代碼)
相關(guān)文章
el-form-item表單label添加提示圖標(biāo)的實現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了ant-design-vue時間線使用踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧2021-09-09
vue 使用async寫數(shù)字動態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動態(tài)加載效果案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue生命周期四個階段created和mount,本文給大家介紹的非常詳細(xì),補充介紹了什么是實例,什么是實例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue 項目代碼拆分的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Element實現(xiàn)動態(tài)增加多個輸入框并校驗
本文主要介紹了Element實現(xiàn)動態(tài)增加多個輸入框并校驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動，需要的朋友可以參考下2023-02-02
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07