静态组件
发请求
mounted() {
//派发action获取产品详情的信息
this.$store.dispatch("getGoodInfo", this.$route.params.skuid);
},
Vuex(三连环)
动态展示组件
注册为路由组件
//设置路由占位符 并进行页面路由跳转
path: "/detail/:skuid",
component: Detail,
meta: { show: true }
点击产品时,需要进行路由跳转以及传递相应的参数
在点击图片的同时进行路由跳转,代替原来的a标签,使用声明式导航,并携带params参数进行跳转
<!-- 在路由跳转的时候切记别忘记带id(params)参数 并对其进行了编程式路由跳转-->
<router-link :to="`/detail/${good.id}`">
<!-- 在这里使用了图片懒加载技术 -->
<img v-lazy="good.defaultImg" />
</router-link>
由于路由模块太复杂(简化操作流程)
设置路由单独模块(对外进行暴露),且把引入文件也需要带过去
// 引入路由文件
import routes from './routes'
export default new VueRouter({
// 在这里容易出错
routes
})
滚动行为
使用前端路由时,想要页面滚到顶部,或者保持不动,需使用滚动行为
添加到路由实例的下面
//滚动行为
scrollBehavior(to, from, savedPosition) {
//返回的这个y=0,代表的滚动条在最上方
return { y: 0 };
},
产品详情数据获取
获取产品详情信息接口
export const reqGoodsInfo = (skuId) => requests({ url: `/item/${skuId}`, method: 'get' });
Vuex (三连环)
在获取三连环的时候需要携带数据过去
需要进入大仓库将小仓库进行合并
import detail from "./detail";
合并小仓库到大仓库之中
detail,
组件挂载派发actions,并携带id过去
mounted() {
//派发action获取产品详情的信息
this.$store.dispatch("getGoodInfo", this.$route.params.skuid);
},
简化仓库数据
//路径导航简化的数据
categoryView(state) {
//比如:state.goodInfo初始状态空对象,空对象的categoryView属性值undefined
//当前计算出的 categoryView属性值至少是一个空对象,假的报错不会有了。
// 得到的是state下面的数据 没有值得时候展现的是空数组
return state.goodInfo.categoryView || {};
},
捞取仓库数据
// 里面包含要使用组件信息
...mapGetters(["categoryView"]),
捞取到数据之后将数据遍历到组件实例本身
<!-- 导航路径区域 -->
<div class="conPoin">
<!-- 判断里面是不是有数据 是否可以用来展示 -->
<span v-show="categoryView.category1Name">{{
categoryView.category1Name
}}</span>
<span v-show="categoryView.category2Name">{{
categoryView.category2Name
}}</span>
<span v-show="categoryView.category3Name">{{
categoryView.category3Name
}}</span>
</div>
使用计算属性简化数据
//简化产品信息的数据
skuInfo(state) {
return state.goodInfo.skuInfo || {};
},
//产品售卖属性的简化
spuSaleAttrList(state) {
return state.goodInfo.spuSaleAttrList || [];
},
将仓库数据展示到页面中来
<h3 class="InfoName">{{ skuInfo.skuName }}</h3>
<p class="news">{{ skuInfo.skuDesc }}</p>