vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
攜帶參數(shù)跳轉(zhuǎn)|router傳參
A頁面點擊按鈕后攜帶參數(shù)跳轉(zhuǎn)到B頁面
原理
- 導入router import { useRouter } from "vue-router";
- A頁面?zhèn)鲄outer.push({})
- B頁面接收route.params.num;
demo
route.js
{ path: '/A', name:'A',component: () => import('pages/A.vueB') },
{ path: '/B', name:'B',component: () => import('pages/B.vue') }A頁面

<template>
<button @click="go">跳轉(zhuǎn)</button>
</template>
<script>
import { useRouter } from "vue-router";
export default ({
setup(props, ctx) {
//router是全局路由對象,route= userRoute()是當前路由對象
let router = useRouter();
const go=()=>{
router.push({
//傳遞參數(shù)使用params的話,只能使用name指定(在route.js里面聲明name)
name:"B",
params:{
num:1
}
/* 使用query的話,指定path或者name都行
path:'/home',
query:{
num:1
} */
})
}
return{
go,
}
}
})
</script>
B頁面

<template>
{{ num }}
</template>
<script>
import { useRoute } from "vue-router";
export default {
setup(props, ctx) {
//router是全局路由對象,route= userRoute()是當前路由對象
let route = useRoute();
const num = route.params.num;
console.log(num);
return {
num,
};
},
};
</script>
vue路由跳轉(zhuǎn),參數(shù)的攜帶與獲取
// 參數(shù)的攜帶兩種方式如下
(1) this.$router.push({ name:'orderDetail', params:{id:14} })
(2) this.$router.push({ path:'/microcosm/orderDetail', params:{id:14} })
// 獲取參數(shù) 對應上面的順序
(1) this.$route.params.id
(2) this.$route.query.id第一種方式
(1)攜帶的參數(shù)沒有拼接在url地址后面;數(shù)據(jù)比較保密,但是name屬性要在路由表中配置name屬性
(2)但是跳轉(zhuǎn)到對應頁面后,刷新該頁面攜帶的參數(shù)會丟失,如果是根據(jù)攜帶參數(shù)獲取的數(shù)據(jù),會出現(xiàn)一定的問題
第二種方式
(1)攜帶的參數(shù)拼接在url地址后面;不用再路由表中配置name屬性
(2)跳轉(zhuǎn)到對應的頁面后,刷新頁面不會出現(xiàn)上一個頁面攜帶的參數(shù)丟失的情況
以上方式可以根據(jù)項目的需求進行選擇。
我本人一般選擇的是第二種方式,一般把數(shù)據(jù)拼接在url后面的,都是一些不重要的數(shù)據(jù),最重要的是不會出現(xiàn)刷新頁面,出現(xiàn)攜帶的數(shù)據(jù)丟失情況
好了,這些僅為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue項目怎樣用nginx反向代理WebSocket請求地址
這篇文章主要介紹了vue項目怎樣用nginx反向代理WebSocket請求地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
springboot + vue+elementUI實現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實現(xiàn)前端圖片上傳,并將圖片存儲到后端數(shù)據(jù)庫,同時在頁面上回顯上傳的圖片,后端通過接口接收圖片,并將其存儲在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-01-01
element中Steps步驟條和Tabs標簽頁關聯(lián)的解決
這篇文章主要介紹了element中Steps步驟條和Tabs標簽頁關聯(lián)的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法,單獨監(jiān)聽事件,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04

