尚品汇项目跟练--跳转到新路由【产品详情页】的事项

点击跳转到一个新的路由【产品详情页】

搞定静态页面

产品详情页的组件还没有注册为路由的组件，需要在点击产品图片的时候，跳转到产品详情页，同时带上产品的id，另外需要考虑跳转到详情页后滚动条的的位置回到顶部。

//引入路由
import Detail from "@/views/Detail";
//配置路由
export default [
{
    path: "/Detail/:skuid?",//这个？表示这个参数可以传递也可以不传递
    component: Detail,
    meta: {
      show: true
    }
  }
]

发请求

api

//获取产品详情信息的接口  URL:/api/item/{skuid}  请求方式：get
export const reqGoodsInfo = skuId =>
  requests({ url: `/item/${skuId}`, method: "get" });

vuex

获取产品详情信息，vuex中需要新增一个新的模块Detail，同时需要回到大仓库中进行合并。

//在store文件夹中建立新的文件Detail.js，内容如下
import { reqGoodsInfo } from "@/api";

const state = {
  goodInfo: {}
};
const mutations = {
  GETGOODINFO(state, goodInfo) {
    state.goodInfo = goodInfo;
  }
};
const actions = {
  //获取产品信息的action
  async getGoodInfo({ commit }, skuId) {
    let result = await reqGoodsInfo(skuId);
    if (result.code == 200) {
      commit("GETGOODINFO", result.data);
    }
  }
};
const getters = {};

export default {
  state,
  mutations,
  actions,
  getters
};
//这里的vuex四件套要记熟，state，mutations，actions，getters

//在大仓库中合并的内容如下

//引入小仓库
import Detail from "./Detail";

//对外暴露store类的一个实例
export default new Vuex.Store({
  //实现vuex仓库模块式开发存储数据
  modules: {
    Detail
  }
});

动态展示组件

在合适的位置发请求。

this.$store.dispatch("getGoodInfo", this.$route.params.skuid);