码迷,mamicode.com
首页 > 其他好文 > 详细

路由编程时传参

时间:2017-10-24 22:48:23      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:ret   按钮   router   out   衣服   key   methods   ack   上进   

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

{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)     //通过  父级路由+参数  的字符串的拼接方式来构建出路由
     }
}

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

路由编程时传参

标签:ret   按钮   router   out   衣服   key   methods   ack   上进   

原文地址:http://www.cnblogs.com/tenro/p/7725866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!