标签: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