如何用Vue实现列表页跳转详情页并添加商品到购物车功能？

本文共计3504个文字，预计阅读时间需要15分钟。

目录+效果概述：+整体效果：+实现后效果图：+代码思路+main.js+代码+移动端rem适配代码+解决跨域问题，在vue.config.js中添加代码+实现路由跳转页面代码+app根组件代码+效果列表页代码

目录

• 效果概述：
• 具体效果：
• 实现后效果图：
• 大致代码思路
• main.js 代码
• 移动端rem适配代码
• 解决跨域问题，在vue.config.js里添加代码
• 实现路由跳转页代码
• app根组件代码
• 效果列表页代码
• 详情页代码
• 购物车页面代码
• vuex页面代码

效果概述：

列表页面显示数据，点击跳转到对应的详情页，详情页可以添加并跳转到购物车，购物车具有常见功能。

具体效果：

1、所有页面根据效果图100%还原。
2、列表页面通过axios请求拿到数据并显示。
3、跳转到详情页时，显示对应列表的数据。
4、详情页内容可以添加到购物车中并显示。
5、购物车商品的所有小计可根据数量的变化而动态显示。
6、购物车商品的总计可根据数量的变化动态显示。
7、购物车的全选按钮可以选中所有商品，所有商品均被选中时，全选按钮也会自动显示被选中。