本篇文章给大家分享的是有关怎么在vue中使用 $router.push实现两组件间值传递，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
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,
}],
};以上就是怎么在vue中使用 $router.push实现两组件间值传递，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
