10前端项目----商品详情页/滚轮行为
商品详情页面
- 商品详情组件
- 发送请求获取相应商品详情信息
- 组件展示数据
- 优化一下路由配置代码
- 滚轮自动置顶
商品详情组件
- 路由配置
点击商品进行跳转—将Detail组件变成路由组件
从商品到详情，肯定需要传参(产品ID)告诉Detail是哪个商品，需要展示哪个商品的详情
在router路由配置中{ path:‘/detail/:id’, component:Detail }
- 复习一下：声明式路由跳转传递参数
①模板字符串：
<!--query参数？区分,多个参数&间隔-->
<router-link :to="`/detail/?id=${goodList.id}`"><router-link/>
<!--params参数/区分,需要在路由配置中添加/:占位符-->
<router-link :to="`/about/detail/content/${msg.id}/${msg.message}`"></router-link>
②对象：
<router-link :to="{path:'/detail',query:{id: goodList.id}
}">
<router-link :to="{name:'Detail',params:{id: goodList.id}
}"></router-link>- 商品跳转router-link
在goodList中：点击商品图片就可以跳转到Detail组件，并传递商品id
<router-link :to="`/detail/${goodList.id}`"><img :src='goodList.img'/></router-link>
发送请求获取相应商品详情信息
①API—>请求接口封装函数
接口URL：/api/item/{id} get请求
//api/index.js
export const reqGoodsInfo = id=>requests({url:`item/${id}`},method:'get');
②vuex—>获取产品信息
vuex中新增一个小模块detail，然后合并到大仓库（import 然后modules中添加detail)
//store/detail/index.js
import {reqGoodsInfo} from '@/api';
const state={goodInfo:{}//看返回的结果是对象还是数组
};
const actions={asyn getGoodInfo ({commit},id){let result = await reqGoodsInfo(id);if(result.code==200){commit('GETGOODINFO',result.data);}}
};
const mutations={GETGOODINFO(state,goodInfo){state.goodInfo = goodInfo;}
};
export default{state,actions,mutations
}
③派发action
在detail组件挂载完毕派发actions
mounted(){
this. s t o r e . d i s p a t h ( ′ g e t G o o d I n f o ′ , t h i s . store.dispath('getGoodInfo',this. store.dispath(′getGoodInfo′,this.route.params.id)
}
组件展示数据
获取到仓库数据
组件获取数据state.detail.goodInfo.categoryView
可以通过getters简化
//detail仓库
const getters={categoryView(){return state.goodInfo.categoryView}
}
问题：getters计算属性依赖于state中的数据，但以上写法会出现警告错误。最开始仓库还未发送请求返回回来数据，goodInfo初始值是空对象，那么getters无法取到categoryView数据，准确写法
state.goodInfo.categoryView||{}
之后的数据同理
skuInfo(){return state.goodInfo.skuInfo||{};}
最后通过mapState映射数据到组件上
优化一下路由配置代码
router/index.js中路由配置信息很多，以及import各自组件
将routes:[……]中右边数组单独放在一个模块routes.js对外暴露
//router/routes.js
//路由配置信息
import……
export default [{path:'/home',component:Home}
]
然后看着就很清晰
//router/index.js
import routes from '/routes.js'
export default new VueRouter({//routes: routes key-value一致省略valueroutes
})
滚轮自动置顶
当从商品页跳到商品详情页时，滚轮从原来商品页的位置到置顶位置
Vue Router里面有个滚动行为，就可以实现自定义路由切换时页面如何滚动
const router = new VueRouter({routes,//滚动行为scrollBehavior(to, from, savedPosition){//y:0表示滚动条在最顶部//y:100 表示滚动条距离顶部100像素return {y:0}}
})