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

2023-08-23 12:16:04 66

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

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

vue文件部分：



{{node.label}}

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

那我们先来看一下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文件部分：

树状列表编辑按钮ts文件部分：

importVuefrom"vue";
interfaceIdata{
id:string;
label:string;
scene:string;
children?:Idata[];
}
exportdefaultVue.extend({
data(){
constdata: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文件部分：

ListEdit路由页面ts文件部分：

importVuefrom"vue";
interfaceIscenes{
id:string;
name:string;
selected:boolean;
}
exportdefaultVue.extend({
data(){
constsceneOption: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");
}
},

});

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

importListDetailfrom"../views/list-detail/index.vue";
importListfrom"../views/list/index.vue";
import{MenuConfig}from"./index";

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐