欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue路由傳參接收以及傳參對(duì)象為對(duì)象時(shí)的問(wèn)題及解決

 更新時(shí)間:2022年09月02日 16:31:21   作者:小劉加油!  
這篇文章主要介紹了vue路由傳參接收以及傳參對(duì)象為對(duì)象時(shí)的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

路由傳參接收以及傳參對(duì)象為對(duì)象時(shí)的問(wèn)題

具體代碼如下所示:

場(chǎng)景

<div @click='toDetail'>查看詳情</div>

路由傳參不能直接傳一個(gè)對(duì)象,需要使用JSON.stringify()方法將其轉(zhuǎn)換成一個(gè)字符串,然后在其他頁(yè)面接受的時(shí)候再使用JSON.parse()方法轉(zhuǎn)換成一個(gè)對(duì)象

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í)注明,才能通過(guò)$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)定義好攜帶過(guò)去的參數(shù),在下個(gè)頁(yè)面通過(guò)$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.通過(guò)路由屬性中的name匹配路由,再根據(jù)params傳遞參數(shù)

//寫好要push去到的組件名
?
<button @click="deliverByName()">params傳參</button>
? ? deliverByName () {
? ? ? this.$router.push({
? ? ? ? name: 'B',
? ? ? ? params: {
? ? ? ? ? sometext: '一只羊出沒(méi)'
? ? ? ? }
? ? ? })
? ? }
?
//跳轉(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.通過(guò)query來(lái)傳遞參數(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>
?
//路由配置 無(wú)需做任何額外配置
{path: '/c', name: 'C', component: C}

注:通過(guò)這種方式拿到的數(shù)據(jù)會(huì)顯示在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í)例對(duì)象,而后者則是一個(gè)跳轉(zhuǎn)的路由對(duì)象,每一個(gè)路由都會(huì)有一個(gè)route對(duì)象,是一個(gè)局部的對(duì)象。

2.params是通過(guò)name屬性傳遞數(shù)據(jù)給指定的組件,query是通過(guò)path的配置將數(shù)據(jù)傳遞到指定path的地址。

3.通過(guò)query傳遞的數(shù)據(jù)在刷新頁(yè)面的時(shí)候不會(huì)消失,而params傳遞的數(shù)據(jù)刷新頁(yè)面得時(shí)候會(huì)消失,可以通過(guò)本地存儲(chǔ)解決。 

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue3插槽(slot)使用方法詳解

    Vue3插槽(slot)使用方法詳解

    在VUE開(kāi)發(fā)項(xiàng)目的過(guò)程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • vue 巧用過(guò)渡效果(小結(jié))

    vue 巧用過(guò)渡效果(小結(jié))

    這篇文章主要介紹了vue 巧用過(guò)渡效果(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))

    詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))

    這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口

    Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口

    這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-01-01
  • vue在index.html中引入靜態(tài)文件不生效問(wèn)題及解決方法

    vue在index.html中引入靜態(tài)文件不生效問(wèn)題及解決方法

    這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問(wèn)題及解決方法,本文給大家分享兩種原因分析,通過(guò)實(shí)例代碼講解的非常詳細(xì) ,需要的朋友可以參考下
    2019-04-04
  • Vue核心概念Getter的使用方法

    Vue核心概念Getter的使用方法

    今天小編就為大家分享一篇關(guān)于Vue核心概念Getter的使用方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧
    2019-01-01
  • vue實(shí)現(xiàn)數(shù)據(jù)控制視圖的原理解析

    vue實(shí)現(xiàn)數(shù)據(jù)控制視圖的原理解析

    這篇文章主要介紹了vue如何實(shí)現(xiàn)的數(shù)據(jù)控制視圖的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • 安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)

    安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)

    這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • vue+openlayers繪制省市邊界線

    vue+openlayers繪制省市邊界線

    這篇文章主要為大家詳細(xì)介紹了vue+openlayers繪制省市邊界線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決

    Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決

    這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評(píng)論