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