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較為方便，當然使用windows.href和sessionStorage一起用也可以達到效果，但是sessionStorage通常儲存的是全局性常用的變量。
而router.push傳遞的參數(shù)生命周期很短，當跳轉(zhuǎn)的頁面關(guān)閉或跳轉(zhuǎn)至其他頁面時，參數(shù)生命周期結(jié)束。
一起來看router.push的使用方法：
1.不傳參數(shù)的跳轉(zhuǎn)
this.$router.push('./lastPage')//跳轉(zhuǎn)至當前目錄的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)當前目錄ResourceTable路由并傳遞一個數(shù)據(jù)接受參數(shù)
this.$route.query //將返回 { myId: 123 }總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在現(xiàn)代前端開發(fā)中,表單組件是業(yè)務系統(tǒng)中不可或缺的重要組成部分,下面這篇文章主要介紹了vue表格組件封裝的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下2024-07-07
父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問題,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)
這篇文章主要介紹了vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
element el-table 表格限制多選個數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個數(shù)功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
在我們開發(fā)項目中,特別是流程審批類的項目,最后一步會提交審核,審核員看完相應信息以后,沒問題就會簽字通過審批,這篇文章主要給大家介紹了關(guān)于VUE簽字組件vue-esign安裝使用的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實例形式分析了VUE兄弟組件傳值操作的原理、步驟、實現(xiàn)方法及相關(guān)注意事項,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了提高vue.js中大型數(shù)據(jù)的性能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06