vue两组件间值传递 $router.push实现方法

两组件间传值，可能包含多种情况，有父子组件和非父子组件，对于父子组件网上有很详细的方法讲解，但非父子组件传值有用bus总线，还有一些其他方法，其中的使用路由跳转的方法讲解太过简洁，难以理解。因为是公司项目，采用的是公司封装的UI框架，但基本上还是采用vue框架，ts编写。所以一些样式结构可能没有参考价值，但我会讲解清楚每一部分作用，主要是路由跳转部分的代码实现。

首先，需求如下图，树状列表每一项有一个编辑按钮，点击按钮之后跳转到另一个路由页面，会将树状列表中每一项数据带过来。

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>

这是封装好的树状列表，使用 scoped slot 会传入两个参数 node 和 data ，分别表示当前节点的 Node 对象和当前节点的数据。当点击button会路由跳转页面显示在 <router-view>中。

那我们先来看一下ts中edit这个方法是怎么写的。

edit(info: Idata) {
 this.$router.push({
 name: `ListEdit`,
 query: {
 label: info.label,
 scene: info.scene,
 },
 });
},

终于看到主角 $router.push ，它会带两个参数，name表示即将跳转到的路由名字，还有一个参数可以是query，也可以是params，它们的区别简单来说，就相当于 get 和 post ，query == get ，params == post，query 会把携带的参数显示在 url 中。那query中的参数就是所需要携带的参数，那这一步总体来说就意味着跳转到ListEdit这个路由页面，并携带label、scene 这两个参数。

至于其中的 info：Idata 这样的写法是因为ts，ts接口了解一下。

现在编辑按钮这部分内容ok了，它确定了要跳转的地方还有需要携带的参数，那么我们这个ListEdit路由页面就应该做好准备接收人家带来的参数呀。在页面创建期间和路由发生改变期间，都会有一个传值的动作，那就再created钩子函数和监听路由函数中写入代码。

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(),
 };
 }
 },
},

我感觉这样半截的代码实在难以说明，name、initScene都是前面定义的，还是放出完整代码体验一下吧。

树状列表编辑按钮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>

树状列表编辑按钮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: "场景1",
 }, {
 id: "2",
 label: "2",
 scene: "场景2",
 children: [{
 id: "4",
 label: "2-1",
 scene: "场景1",
 }],
 }, {
 id: "3",
 label: "3",
 scene: "场景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接口定义可以递归实现，children的类型定义还是Idata，就可以直接自我调用。

ListEdit 路由页面vue文件部分：

<template>
 <div>
 <form :model="form" ref="form">
 <form-item :label="目录名称">
 <input v-model="form.name"></input>
 </form-item>
 <form-item :label="选择场景">
 <select v-model="form.initScene" placeholder="请输入场景">
 <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 路由页面ts文件部分：

import Vue from "vue";
interface Iscenes {
 id: string;
 name: string;
 selected: boolean;
}
export default Vue.extend({
 data() {
 const sceneOption: Iscenes[] = [{
 id: "1",
 name: "场景1",
 selected: false,
 },{
 id: "2",
 name: "场景2",
 selected: false,
 },{
 id: "3",
 name: "场景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");
 }
 },

});

最后，再来看一下，路由部分的配置：

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,
 }],
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。