网站开发接单长沙注册公司流程与费用

商品详情组件

• 路由配置

点击商品进行跳转—将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.$store.dispath{(}^{\prime }getGoodInf{o}^{\prime },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}}
})