Vue组件间值传递：利用$router.push实现树状列表编辑功能

在Vue项目中，当需要在两个非父子组件之间进行值传递，并且特定场景下是通过点击树状列表中的编辑按钮跳转到另一个路由页面，展示被选中的数据，可以利用Vue的路由功能实现这一需求。在使用封装的UI框架时，尽管样式结构可能与标准Vue有所不同，但核心原理依然基于Vue的组件通信和路由机制。 首先，确保你在项目中已经设置了`<router-view>`组件，它会根据路由规则动态渲染不同的组件。在树状列表组件中，通过`:click`事件监听器绑定`edit`方法，这个方法接收一个名为`info`的对象，包含了待传递的数据，如`{ label: string, scene: any }`。 在`edit`方法内部，调用`this.$router.push`来导航到新的路由。`$router.push`是Vue Router的核心方法，用于触发路由改变。它接受两个关键参数：`name`参数代表你要跳转到的路由名称，这里假设路由名称为`ListEdit`；而第二个参数是一个对象，它可以用作查询字符串（query）或者路径参数（params），取决于你选择的方式。 在本例中，使用了`query`属性，因为它通常用于向服务器发送GET请求获取数据，而这里的目的是在不刷新页面的情况下传递数据。通过`query`，你可以设置动态的键值对，如`{ label: info.label, scene: info.scene }`，这样新的路由地址就会变成`/ListEdit?label=info.label&scene=info.scene`。 这样，当你点击编辑按钮时，`edit`方法会被调用，将`info`对象中的`label`和`scene`属性作为查询参数传递到`ListEdit`路由，新页面会在接收到这些参数后可以根据它们显示或处理相应的数据。这种方法适用于路由间数据的临时传递，无需在每个页面实例中维护状态，保持了组件的解耦和单页应用的良好状态管理。