vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值，可能包含多種情況，有父子組件和非父子組件，對(duì)于父子組件網(wǎng)上有很詳細(xì)的方法講解，但非父子組件傳值有用bus總線，還有一些其他方法，其中的使用路由跳轉(zhuǎn)的方法講解太過(guò)簡(jiǎn)潔，難以理解。因?yàn)槭枪卷?xiàng)目，采用的是公司封裝的UI框架，但基本上還是采用vue框架，ts編寫(xiě)。所以一些樣式結(jié)構(gòu)可能沒(méi)有參考價(jià)值，但我會(huì)講解清楚每一部分作用，主要是路由跳轉(zhuǎn)部分的代碼實(shí)現(xiàn)。
首先，需求如下圖，樹(shù)狀列表每一項(xiàng)有一個(gè)編輯按鈕，點(diǎn)擊按鈕之后跳轉(zhuǎn)到另一個(gè)路由頁(yè)面，會(huì)將樹(shù)狀列表中每一項(xiàng)數(shù)據(jù)帶過(guò)來(lái)。
vue文件部分：
<tree
:data="dataList"
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }" :class="$style.list">
<span :class="$style.listText">{{ node.label }}</span>
<span :class="$style.listBtn">
<button
:class="$style.btn"
type="text"
size="mini"
@click="() => edit(data)">
</button>
</span>
</span>
</tree>
<router-view></router-view>
這是封裝好的樹(shù)狀列表，使用 scoped slot 會(huì)傳入兩個(gè)參數(shù) node 和 data ，分別表示當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象和當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)。當(dāng)點(diǎn)擊button會(huì)路由跳轉(zhuǎn)頁(yè)面顯示在 <router-view>中。
那我們先來(lái)看一下ts中edit這個(gè)方法是怎么寫(xiě)的。
edit(info: Idata) {
this.$router.push({
name: `ListEdit`,
query: {
label: info.label,
scene: info.scene,
},
});
},
終于看到主角 $router.push ，它會(huì)帶兩個(gè)參數(shù)，name表示即將跳轉(zhuǎn)到的路由名字，還有一個(gè)參數(shù)可以是query，也可以是params，它們的區(qū)別簡(jiǎn)單來(lái)說(shuō)，就相當(dāng)于 get 和 post ，query == get ，params == post，query 會(huì)把攜帶的參數(shù)顯示在 url 中。那query中的參數(shù)就是所需要攜帶的參數(shù)，那這一步總體來(lái)說(shuō)就意味著跳轉(zhuǎn)到ListEdit這個(gè)路由頁(yè)面，并攜帶label、scene 這兩個(gè)參數(shù)。
至于其中的 info：Idata 這樣的寫(xiě)法是因?yàn)閠s，ts接口了解一下。
現(xiàn)在編輯按鈕這部分內(nèi)容ok了，它確定了要跳轉(zhuǎn)的地方還有需要攜帶的參數(shù)，那么我們這個(gè)ListEdit路由頁(yè)面就應(yīng)該做好準(zhǔn)備接收人家?guī)?lái)的參數(shù)呀。在頁(yè)面創(chuàng)建期間和路由發(fā)生改變期間，都會(huì)有一個(gè)傳值的動(dòng)作，那就再created鉤子函數(shù)和監(jiān)聽(tīng)路由函數(shù)中寫(xiě)入代碼。
created() {
const {label= "", scene= ""} = this.$route.query;
this.form = {
name: label.toString(),
initScene: scene.toString(),
};
},
watch: {
$route(to, from) {
if (to.path === "/list/listEdit") {
const {label= "", scene= ""} = to.query;
this.form = {
name: label.toString(),
initScene: scene.toString(),
};
}
},
},
我感覺(jué)這樣半截的代碼實(shí)在難以說(shuō)明，name、initScene都是前面定義的，還是放出完整代碼體驗(yàn)一下吧。
樹(shù)狀列表編輯按鈕vue文件部分：
<template>
<tree
:data="dataList"
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }" :class="$style.list">
<span :class="$style.listText">{{ node.label }}</span>
<span :class="$style.listBtn">
<button
:class="$style.btn"
type="text"
size="mini"
@click="() => edit(data)">
</button>
</span>
</span>
</tree>
<router-view></router-view>
</template>
<script src="./index.ts" lang="ts"></script>
樹(shù)狀列表編輯按鈕ts文件部分：
import Vue from "vue";
interface Idata {
id: string;
label: string;
scene: string;
children?: Idata[];
}
export default Vue.extend({
data() {
const data: Idata[] = [{
id: "1",
label: "1",
scene: "場(chǎng)景1",
}, {
id: "2",
label: "2",
scene: "場(chǎng)景2",
children: [{
id: "4",
label: "2-1",
scene: "場(chǎng)景1",
}],
}, {
id: "3",
label: "3",
scene: "場(chǎng)景2",
}];
return {
data,
dataList: JSON.parse(JSON.stringify(data)),
};
},
methods: {
edit(info: Idata) {
this.$router.push({
name: `VisListEdit`,
query: {
label: info.label,
scene: info.scene,
},
});
},
},
});
這里，ts接口定義可以遞歸實(shí)現(xiàn)，children的類型定義還是Idata，就可以直接自我調(diào)用。
ListEdit 路由頁(yè)面vue文件部分：
<template>
<div>
<form :model="form" ref="form">
<form-item :label="目錄名稱">
<input v-model="form.name"></input>
</form-item>
<form-item :label="選擇場(chǎng)景">
<select v-model="form.initScene" placeholder="請(qǐng)輸入場(chǎng)景">
<option
v-for="item in sceneOption"
:key="item.id"
:label="item.name"
:value="item.id">
</option>
</select>
</form-item>
</form>
<div>
<button type="primary" @click="submitForm">保存</button>
</div>
</div>
</template>
<script src="./index.ts" lang="ts"></script>
ListEdit 路由頁(yè)面ts文件部分：
import Vue from "vue";
interface Iscenes {
id: string;
name: string;
selected: boolean;
}
export default Vue.extend({
data() {
const sceneOption: Iscenes[] = [{
id: "1",
name: "場(chǎng)景1",
selected: false,
},{
id: "2",
name: "場(chǎng)景2",
selected: false,
},{
id: "3",
name: "場(chǎng)景3",
selected: false,
}];
return {
form: {
name: "",
initScene: "",
},
sceneOption,
};
},
created() {
const {label= "", scene= ""} = this.$route.query;
this.form = {
name: label.toString(),
initScene: scene.toString(),
};
},
watch: {
$route(to, from) {
if (to.path === "/list/listEdit") {
const {label= "", scene= ""} = to.query;
this.form = {
name: label.toString(),
initScene: scene.toString(),
};
}
},
},
methods: {
submitForm() {
console.log("test");
}
},
});
最后，再來(lái)看一下，路由部分的配置：
import ListDetail from "../views/list-detail/index.vue";
import List from "../views/list/index.vue";
import { MenuConfig } from "./index";
export const listRouter: MenuConfig = {
path: "/list",
component: List,
title: "目錄管理",
key: "list",
name: "list",
hasPermission: true,
subShow: false,
children: [{
path: "listEdit",
title: "編輯目錄",
hasPermission: true,
name: "ListEdit",
key: "ListEdit",
component: ListDetail,
}],
};
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue之this.$router.push頁(yè)面刷新問(wèn)題
- vue?跳轉(zhuǎn)頁(yè)面$router.resolve和$router.push案例詳解
- vue中的this.$router.push()路由傳值方式
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總
- vue如何通過(guò)$router.push傳參數(shù)
- Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)操作
- 對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解
- Vue $router.push打開(kāi)新窗口的實(shí)現(xiàn)方法
相關(guān)文章
本篇內(nèi)容給大家總結(jié)了VUE的重要難點(diǎn)，并把代碼做了詳細(xì)分享，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
Vue?計(jì)算屬性之姓名案例的三種實(shí)現(xiàn)方法
這篇文章主要介紹了Vue?計(jì)算屬性之姓名案例的三種實(shí)現(xiàn)方法，計(jì)算屬性實(shí)現(xiàn)、methods實(shí)現(xiàn)和插值語(yǔ)法實(shí)現(xiàn)，下面文章具體介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了在vue3中安裝使用bootstrap過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的操作
這篇文章主要介紹了vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue3不支持Filters過(guò)濾器的問(wèn)題
這篇文章主要介紹了Vue3不支持Filters過(guò)濾器的問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作
這篇文章主要介紹了vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2025-03-03
這篇文章主要介紹了vuejs對(duì)接后端踩過(guò)的坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了深入理解Vue nextTick 機(jī)制，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04