怎么在vue中使用$router.push实现两组件间值传递

本篇文章给大家分享的是有关怎么在vue中使用 $router.push实现两组件间值传递，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、做网站、南通网络推广、小程序制作、南通网络营销、南通企业策划、南通品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供南通建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

vue文件部分：

  
    {{ node.label }}
    
      
      
    
  

这是封装好的树状列表，使用 scoped slot 会传入两个参数 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文件部分：

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文件部分：

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实现两组件间值传递，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。