vue路由傳參接收以及傳參對象為對象時(shí)的問題及解決
路由傳參接收以及傳參對象為對象時(shí)的問題
具體代碼如下所示:
場景
<div @click='toDetail'>查看詳情</div>
路由傳參不能直接傳一個(gè)對象,需要使用JSON.stringify()方法將其轉(zhuǎn)換成一個(gè)字符串,然后在其他頁面接受的時(shí)候再使用JSON.parse()方法轉(zhuǎn)換成一個(gè)對象
const router = useRouter() const toDetail = () => { ?? ?// 我使用的是Vue3,router要從useRouter獲取 ?? ?router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } }) }
接收路由參數(shù)
1. Vue3接收
import { useRoute } from "vue-router"; setup() { ?? ?const route = useRoute() ?? ?const data = JSON.parse(route.params.list) }
2. Vue2接收
let data = this.$route.params.list data = JSON.parse(data)
vue路由傳參總結(jié)
Vue路由傳參
1.route-link路由導(dǎo)航
在to跳轉(zhuǎn)鏈接后傳遞參數(shù),獲取時(shí)需要在路由配置path時(shí)注明,才能通過$route.params拿到
<router-link to="/a/123">routerlink傳參</router-link> ? // 跳轉(zhuǎn)后拿到參數(shù) mounted () { ? this.num = this.$route.params.num } ? ? //num是在配置路由路徑時(shí)定義好的 ? {path: '/a/:num', name: A, component: A}
2.$router.push
push跳轉(zhuǎn)時(shí)在函數(shù)內(nèi)定義好攜帶過去的參數(shù),在下個(gè)頁面通過$route.params拿到
<button @click="deliverParams(123)">push傳參</button> ? methods: { ? ? deliverParams (id) { ? ? ? this.$router.push({ ? ? ? ? path: `/d/${id}` ? ? ? }) ? ? } ? } ? //拿到參數(shù) mounted () { ? this.id = this.$route.params.id } ? //路由配置 {path: '/d/:id', name: D, component: D}
3.通過路由屬性中的name匹配路由,再根據(jù)params傳遞參數(shù)
//寫好要push去到的組件名 ? <button @click="deliverByName()">params傳參</button> ? ? deliverByName () { ? ? ? this.$router.push({ ? ? ? ? name: 'B', ? ? ? ? params: { ? ? ? ? ? sometext: '一只羊出沒' ? ? ? ? } ? ? ? }) ? ? } ? //跳轉(zhuǎn)后params拿到數(shù)據(jù) <template> ? <div id="b"> ? ? This is page B! ? ? <p>傳入?yún)?shù):{{this.$route.params.sometext}}</p> ? </div> </template> ? //路由規(guī)則定義 {path: '/b', name: 'B', component: B}
4.通過query來傳遞參數(shù)
//定義路由事件 <button @click="deliverQuery()">query傳參</button> ? ? deliverQuery () { ? ? ? this.$router.push({ ? ? ? ? path: '/c', ? ? ? ? query: { ? ? ? ? ? sometext: '這是小羊同學(xué)' ? ? ? ? } ? ? ? }) ? ? } ? //跳轉(zhuǎn)后拿到數(shù)據(jù) <template> ? <div id="C"> ? ? This is page C! ? ? <p>這是父組件傳入的數(shù)據(jù): {{this.$route.query.sometext}}</p> ? </div> </template> ? //路由配置 無需做任何額外配置 {path: '/c', name: 'C', component: C}
注:通過這種方式拿到的數(shù)據(jù)會顯示在url中
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6
總結(jié):
1.傳參的是this.$router,接收參數(shù)是this.$route,易混淆。前者是VueRouter的實(shí)例對象,而后者則是一個(gè)跳轉(zhuǎn)的路由對象,每一個(gè)路由都會有一個(gè)route對象,是一個(gè)局部的對象。
2.params是通過name屬性傳遞數(shù)據(jù)給指定的組件,query是通過path的配置將數(shù)據(jù)傳遞到指定path的地址。
3.通過query傳遞的數(shù)據(jù)在刷新頁面的時(shí)候不會消失,而params傳遞的數(shù)據(jù)刷新頁面得時(shí)候會消失,可以通過本地存儲解決。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法,本文給大家分享兩種原因分析,通過實(shí)例代碼講解的非常詳細(xì) ,需要的朋友可以參考下2019-04-04vue實(shí)現(xiàn)數(shù)據(jù)控制視圖的原理解析
這篇文章主要介紹了vue如何實(shí)現(xiàn)的數(shù)據(jù)控制視圖的相關(guān)知識,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01Vue3 reactive響應(yīng)式賦值頁面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08