vue路由跳转并传递参数,A页面传递参数跳转到B页面,B页面用接收的参数搜索

vue实现页面A传参跳转,同时页面B根据传来的参数执行搜索方法

最近项目中的需求,后台管理系统的表格中,通过判断显示不同的状态,
状态为可执行的时候点击跳转到另一页面,并且拿到
1.页面A点击查看按钮,获取所需参数并实现页面跳转,带参数。

  methods: {
    check(selectTable) {
      this.$router.push({ path: "/member", query: { phone: selectTable.phone } })
    },

2.页面B,获得页面A传过来的参数,同时实现搜索方法,搜索条件就是传过来的参数phone

  watch: {
    "$route.query.phone"(val) {
      if (val) {
        this.search.phone = val
        console.log(val, "val")
        this.handleSearch()
      }
    }
  },

借用$route的query方法传参

这时候,第二步有点问题,页面刚跳转过去的时候没有将参数赋值给搜索的参数,进入页面B的时候并没有执行带参查询,
改造一下,使用

activated(){}

,在B页面一进入的时候,完成赋值

  activated() {
    if (this.$route.query.phone) {
      this.search.phone = this.$route.query.phone
    }
    console.log(this.$route.query.phone)
    this.handleSearch()
  },

这样就可以实现了


版权声明:本文为Jiang_XiaoBai007原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。