vue3頁面之間傳遞參數(shù)URL方式
更新時間：2025年10月27日 09:16:36 作者：內(nèi)向蛋撻
文章建議在兩個組件之間通過URL傳遞參數(shù),而不是使用Vuex或總線事件,因為它們對于簡單的跳轉(zhuǎn)頁面關(guān)系來說是過度的,頁面1通過跳轉(zhuǎn)并使用模板字符串傳遞ID,頁面2通過獲取URL參數(shù)來接收并顯示
vue3頁面之間傳遞參數(shù)URL
本地存儲不至于，vuex也浪費，兩個組件之間只是跳轉(zhuǎn)頁面關(guān)系，沒有必要進行一個bus總線，
可以使用url進行一個地址欄信息傳遞，
頁面1
router.push(`/template/indexAdd/?id=${val.id}`)采用跳轉(zhuǎn)頁面加上模板字符串，傳遞一個id
地址會顯示
頁面2獲取頁面1的參數(shù)
const { id } = route.query//結(jié)構(gòu)賦值方法獲取
const id = route.query.id//賦值獲取千萬不要忘了引入
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element-ui el-date-picker限制選擇時間為當天之前的代碼
這篇文章主要介紹了vue element-ui el-date-picker如何限制選擇時間為當天之前,文中給大家提供了代碼段和截圖，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue3+ts使用Echarts的實例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3響應式對象Reactive和Ref的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Vue動態(tài)引用json數(shù)據(jù)的兩種方式
在 Vue 項目中引用 JSON 文件非常簡單,尤其是當文件內(nèi)容是一個數(shù)組時,本文給大家介紹了Vue動態(tài)引用json數(shù)據(jù)的兩種方式,并有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2025-04-04
關(guān)于vue-router的使用及實現(xiàn)原理
這篇文章主要介紹了關(guān)于vue-router的使用及實現(xiàn)原理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應式的變量,通過將ref函數(shù)應用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實例的詳細圖文教程,需要的朋友可以參考下2023-10-10
Vue3?中的?Composition?API?是一種新的編寫組件邏輯的方式,它提供了更好的代碼組織、類型推導、測試支持和復用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
VUE配置proxy代理的開發(fā)測試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了Vue如何實現(xiàn)從response讀取流下載問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04