10前端项目----商品详情页/滚轮行为

商品详情页面

商品详情组件

路由配置

点击商品进行跳转---将Detail组件变成路由组件

从商品到详情，肯定需要传参 (产品ID)告诉Detail是哪个商品，需要展示哪个商品的详情

在router路由配置 中 { path:'/detail/:id', component:Detail }

复习一下：声明式路由跳转传递参数

①模板字符串：

html 复制代码

<!--query参数？区分,多个参数&间隔-->
<router-link :to="`/detail/?id=${goodList.id}`"><router-link/>
<!--params参数/区分,需要在路由配置中添加/:占位符-->
<router-link :to="`/about/detail/content/${msg.id}/${msg.message}`"></router-link>

②对象：

html 复制代码

<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

html 复制代码

<router-link :to="`/detail/${goodList.id}`"><img :src='goodList.img'/></router-link>

发送请求获取相应商品详情信息

①API--->请求接口封装函数

接口URL：/api/item/{id} get请求

javascript 复制代码

//api/index.js
export const reqGoodsInfo = id=>requests({url:`item/${id}`},method:'get');

②vuex--->获取产品信息

vuex中新增一个小模块detail，然后合并到大仓库（import 然后modules中添加detail)

javascript 复制代码

//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简化

javascript 复制代码

//detail仓库
const getters={
	categoryView(){
		return state.goodInfo.categoryView
	}
}

问题：getters计算属性依赖于state中的数据，但以上写法会出现警告错误。最开始仓库还未发送请求返回回来数据，goodInfo初始值是空对象，那么getters无法取到categoryView数据，准确写法state.goodInfo.categoryView||{}

之后的数据同理

javascript 复制代码

skuInfo(){
		return state.goodInfo.skuInfo||{};
	}

最后通过mapState映射数据到组件上

优化一下路由配置代码

router/index.js中路由配置信息很多，以及import各自组件

将routes:[......]中右边数组单独放在一个模块routes.js对外暴露

javascript 复制代码

//router/routes.js
//路由配置信息
import......
export default [
	{
		path:'/home',
		component:Home
	}
]

然后看着就很清晰

javascript 复制代码

//router/index.js
import routes from '/routes.js'
export default new VueRouter({
    //routes: routes  key-value一致省略value
    routes
})

滚轮自动置顶

当从商品页跳到商品详情页时，滚轮从原来商品页的位置到置顶位置

Vue Router里面有个滚动行为，就可以实现自定义路由切换时页面如何滚动

javascript 复制代码

const router = new VueRouter({
	routes,
	//滚动行为
	scrollBehavior(to, from, savedPosition){
		//y:0表示滚动条在最顶部
		//y:100 表示滚动条距离顶部100像素
		return {y:0}
	}
})