开发详情页面-CFANZ编程社区

静态组件

发请求

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>