vue路由跳转页面间的传值?

依依雨柔
  • 233

clipboard.png
clipboard.png
点击第一张图片的提交按钮跳转到第二个的页面,想把图1选中的商品信息传递到图2,怎么写代码?
图1和图2的页面算什么关系?用什么完成数据传递?

<el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney">提交订单</router-link></el-button>

页面1:

 <template>
  <div>
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <ul>
        <li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
            <el-checkbox-group v-model="checkList" @change="handleCheckedBooks">
                <el-checkbox :label="item.id">
                    <img class="bookImg" :src='item.book_url' style="width: 100px; height: 100px;">
                    <h3>{{item.book_title}}</h3>
                    <span class="price">¥{{item.book_price}}</span>
                    <div>
                        <el-input-number v-model="item.num" size="small" @change="handleChange" :min="0"></el-input-number> 
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </li>
    </ul>
    <div class="cart">
        <span>共</span>
        <span class="highLight">{{mount}}</span>
        <span>本</span>
        <el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney">提交订单</router-link></el-button>
    </div>
  </div>
 </template>
<script> 
import BreadCrumb from '@/components/common/BreadCrumb'
import bookMoney from '@/book/bookMoney'
export default {
  components: {
    BreadCrumb,
    bookMoney
  },
  data () {
    return {
    checkAll: false,
    isIndeterminate: true,
    breadCrumbList: [],
    bookList: [],
    radio: '0',
    checkList: [],
    num: 1,
    mount: 0,
    total: 0
    }
  },
  mounted () {
    this.breadCrumbList = [
    {title: '首页'},
    {title: '图书管理'},
    {title: '图书借阅'}
    ],
    this.bookList = [{
    id: '0',
    book_url: require('../assets/images/book1.jpg'),
    book_title: '古埃及死者之书',
    book_price: '39',
    num: 0
    },{
    id: '1',
    book_url: require('../assets/images/book2.jpg'),
    book_title: '当你开始爱自己',
    book_price: '45',
    num: 0
    },{
    id: '2',
    book_url: require('../assets/images/book3.jpg'),
    book_title: '格雷巴旅馆',
    book_price: '59',
    num: 0
    },{
    id: '3',
    book_url: require('../assets/images/book4.jpg'),
    book_title: '亲密关系',
    book_price: '30',
    num: 0
    },{
    id: '4',
    book_url: require('../assets/images/book5.jpg'),
    book_title: '治愈的力量',
    book_price: '25',
    num: '0'
    },{
    id: '5',
    book_url: require('../assets/images/book6.jpg'),
    book_title: '公主走进黑森林',
    book_price: '69',
    num: 0
    }
    ]
  },
  methods: {
    onOrder () {
    },
    handleCheckedBooks () {
        console.log(this.checkList)
        this.checkList.forEach((item) => {
        console.log(item)
        this.bookList.forEach((val) => {
        if (val.id === item) {
        }
        })
    })
    this.checkList = value
        console.log(444)
        console.log(this.checkList)
    },
    handleChange (val) {
        this.mount++
        this.$nextTick(function () {
        this.checkList.forEach((item) => {
        this.bookList.forEach((obj) => {
        if (obj.id === item) {
        this.total = val * obj.book_price
        }
        })
      })
    })
    },
  }
}
</script>

回复
阅读 4.6k
4 个回答

除了楼上说的两种方法,还可以使用$emit和$on来传递数据
对于一些通用的数据集,建议使用vuex进行状态管理
如果只是这种随时都要消除的数据,没必要
你既然用了router-link,最好的方法还是在做页面路由的时候把数据带过去

有2种方法,一种是像楼上说的,用编程式导航,还有一种就是用localStorage缓存你的数据

如果页面组件比较多又不是父子组件的话,最好引入一下vuex来管理状态,如果状态管理比较简单还可以用bus.$emit('aa',1)发送消息的方式来传递

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏