VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式
更新時(shí)間：2024年01月22日 10:32:50 作者：一顆哈士奇
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參
vue項(xiàng)目中在需要不同頁(yè)面之間跳轉(zhuǎn)并且傳遞數(shù)據(jù)時(shí)，通常會(huì)使用router.push較為方便，當(dāng)然使用windows.href和sessionStorage一起用也可以達(dá)到效果，但是sessionStorage通常儲(chǔ)存的是全局性常用的變量。
而router.push傳遞的參數(shù)生命周期很短，當(dāng)跳轉(zhuǎn)的頁(yè)面關(guān)閉或跳轉(zhuǎn)至其他頁(yè)面時(shí)，參數(shù)生命周期結(jié)束。
一起來看router.push的使用方法：
1.不傳參數(shù)的跳轉(zhuǎn)
this.$router.push('./lastPage')//跳轉(zhuǎn)至當(dāng)前目錄的lastPage頁(yè)面或者用路由名字：
this.$router.push('ResourceTable')//跳轉(zhuǎn)至路由名為ResourceTable的頁(yè)面
2.帶參數(shù)
用pararms傳遞：（注意前面一定是name）
this.$router.push({ name: 'ResourceTable', params: { myId: 123 }})//跳轉(zhuǎn)至ResourceTable路由并傳遞一個(gè)數(shù)據(jù)接受參數(shù)
this.$route.params //將返回{ myId: 123 }用query傳遞：（注意前面一定是path）
this.$router.push({ path: './ResourceTable', query: { myId: 123 }})//跳轉(zhuǎn)當(dāng)前目錄ResourceTable路由并傳遞一個(gè)數(shù)據(jù)接受參數(shù)
this.$route.query //將返回 { myId: 123 }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)
Vue3?Pinia是一個(gè)狀態(tài)管理庫(kù),專門為Vue3設(shè)計(jì)優(yōu)化,它提供了一種簡(jiǎn)單而強(qiáng)大的方式來管理應(yīng)用程序的狀態(tài),并且與Vue3的響應(yīng)式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下2024-03-03
vue?select組件綁定的值為數(shù)字類型遇到的問題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue電商網(wǎng)站首頁(yè)內(nèi)容吸頂功能實(shí)現(xiàn)過程
電商網(wǎng)站的首頁(yè)內(nèi)容會(huì)比較多，頁(yè)面比較長(zhǎng)，為了能讓用戶在滾動(dòng)瀏覽內(nèi)容的過程中都能夠快速的切換到其它分類。需要分類導(dǎo)航一直可見，所以需要一個(gè)吸頂導(dǎo)航的效果。目標(biāo):完成頭部組件吸頂效果的實(shí)現(xiàn)2023-04-04
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
本文主要介紹了vue+vite+diff.js使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
在Vue中有多種方式可以進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要給大家介紹了關(guān)于vue路由三種傳參方式的相關(guān)資料,文中介紹的方法分別包括params傳參、query傳參(顯示傳參)以及props傳參(路由組件傳參),,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue自定義指令及使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
Vite 是一個(gè)面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07