路由编程时传参

由于路由在上节声明式传参中已经配好,我们可以沿用

{path: '/shop/':shop_id, component:Shop}

 

选择cart.vue组件来示例，再该组件中添加数据

data () {
    return {
        msg: "我是购物车",
        shop: [
          {shop_id:"cap", name: "杯具",price: 30},
          {shop_id:"computer", name: "电脑",price: 4999},
          {shop_id:"mobile", name: "手机",price: 2988},
          {shop_id:"food", name: "食品",price: 49.8},
          {shop_id:"clothes", name: "衣服",price: 299}
        ]
     };
}

 

然后在页面上进行渲染，并在列表里的a标签上添加点击事件pushFn(item.shop_id)并将商品shop_id传进去，便于方法的调用

<template>
   <div id='cart'>
     <h1>我是购物车</h1>
     <ul>
        <li v-for="(item, index) in shop" :key="item.id">
            <a @click="pushFn(item.shop_id)">{{item.name}}</a>
        </li>
     </ul>
   </div>
</template>

 

在vue参数中添加方法

methods:{
     pushFn(a){
          this.$router.push('/shop/' + a)     //通过  父级路由+参数  的字符串的拼接方式来构建出路由
     }
}

这样我们亦可以通过点击按钮来进行页面的跳转