vue-route 路由传参的使用

1 router/index.js 中的定义

{
  path: '/product',
  component: ProductIndex,
  meta: {
    requiredAuth: true,
  }
},

2 category-link.vue 中的调用

<router-link :to="{path: '/product', query: {caa_id: item.caa_id}}">
  <img :src="item.caa005" class="img-responsive link-item-image">
  <div class="link-item-title text-primary">{{item.caa001}}</div>
</router-link>

3 product-list.vue 中的响应

let caa_id = this.$route.query.caa_id;
let _self = this;
this.rows.map(function (item) {
  if (item.caa_id == caa_id) {
    _self.select(item);
  }
});

4 小结：

在任何一个组件中都可以用以下的语法捕捉到参数

let params = this.$route.query;

然后作出相应的处理。

转载于:https://www.cnblogs.com/mouseleo/p/8543500.html