1. 程式人生 > >vue從一個頁面跳轉到另一個頁面並攜帶引數

vue從一個頁面跳轉到另一個頁面並攜帶引數

 

1.需求:

點選商場跳轉到商業體列表

 

解決方案:

元頁面:

a標籤中新增跳轉函式

<a class="orderBtn1 sIRicon2" href="javascript:void(0);" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商場</a>
      toMallInfo: function(mallCode){
        this.$router.push({
          path: '/propertyInfo/mall/mallList',
          // name: 'mallList',
          query: {
            mallCode: 'M000989'
          }
        })
      },

將將跳轉的url新增到 $router中。

path 中的url 最前面加 / 代表是根目錄下,不加則是子路由

通過path + query 的組合傳遞引數

----

跳轉頁面接收引數

  created(){
      this.getParams()
    },
methods :{getParams(){
        // 取到路由帶過來的引數
        const routerParams = this.$route.query.mallCode
        // 將資料放在當前元件的資料內
        this.mallInfo.searchMap.mallCode = routerParams;
        this.keyupMallName()
      }
    },
    watch: {
      '$route': 'getParams'
    }

 

解決!!!