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