vue路由傳參接收以及傳參對象為對象時的問題及解決
更新時間：2022年09月02日 16:31:21 作者：小劉加油！
這篇文章主要介紹了vue路由傳參接收以及傳參對象為對象時的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
路由傳參接收以及傳參對象為對象時的問題
具體代碼如下所示：
場景
<div @click='toDetail'>查看詳情</div>
路由傳參不能直接傳一個對象，需要使用JSON.stringify()方法將其轉(zhuǎn)換成一個字符串，然后在其他頁面接受的時候再使用JSON.parse()方法轉(zhuǎn)換成一個對象
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ù)，獲取時需要在路由配置path時注明，才能通過$route.params拿到
<router-link to="/a/123">routerlink傳參</router-link>
?
// 跳轉(zhuǎn)后拿到參數(shù)
mounted () {
? this.num = this.$route.params.num
}
?
?
//num是在配置路由路徑時定義好的
?
{path: '/a/:num', name: A, component: A}2.$router.push
push跳轉(zhuǎn)時在函數(shù)內(nèi)定義好攜帶過去的參數(shù)，在下個頁面通過$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的實例對象，而后者則是一個跳轉(zhuǎn)的路由對象，每一個路由都會有一個route對象，是一個局部的對象。
2.params是通過name屬性傳遞數(shù)據(jù)給指定的組件，query是通過path的配置將數(shù)據(jù)傳遞到指定path的地址。
3.通過query傳遞的數(shù)據(jù)在刷新頁面的時候不會消失，而params傳遞的數(shù)據(jù)刷新頁面得時候會消失，可以通過本地存儲解決。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實現(xiàn)掛載全局方法和用getCurrentInstance代替this
這篇文章主要介紹了Vue3實現(xiàn)掛載全局方法和用getCurrentInstance代替this,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue中的總線Bus是一種通信機制，可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時需要注意Bus的命名和定義、監(jiān)聽和觸發(fā)事件的方法、移除和銷毀Bus的時機和方式等問題。合理使用總線Bus可以提高組件的復(fù)用性和可維護性，但過度依賴可能會導(dǎo)致代碼耦合和難以維護2023-04-04
useRouter?是?Vue?3?Composition?API?中的鉤子（hook）,它只能在?Vue?組件中使用,本文主要來和大家探討一下如何讓他在組件外使用,感興趣的可以了解下2024-11-11
這篇文章主要介紹了VUE調(diào)用本地json的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了從零開始搭建vue移動端項目到上線的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10 
本篇文章主要介紹了vue使用drag與drop實現(xiàn)拖拽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09 
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧
2021-09-09 
這篇文章主要介紹了vue 父組件給子組件傳值，子組件給父組件傳值,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04 
這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07