尚硅谷Vue电商项目笔记4-Detail滚动行为放大镜以及change事件

最新推荐文章于 2026-07-22 22:54:56 发布

原创

最新推荐文章于 2026-07-22 22:54:56 发布 · 525 阅读

尚硅谷Vue电商项目笔记4-Detail滚动行为放大镜以及change事件

教程地址

静态页面的实现

基本展示

点击商品名称和图片会跳转到详情页
直接使用提供的Detail,是一个路由组件所以要放到pages目录中,并且在router下进行路由注册
- 引入路由
- 注册路由
- 跳转到那个产品的详情,需要传递一个商品id参数,这样才知道查看的是那个商品,所以在注册路由的时候要使用params参数占位符
使用router-link标签代替Search页面的a标签进行路由的跳转

路由的配置：

{
   
   
  name:'detail',
  // 路由的配置
  path:'/detail/:goodsId',
  component:Detail
}

替换原来的a标签，并且传递商品id：

<div class="p-img">
  <!-- 字符串写法,如果router-link中有target="_blank"属性则也会在当前页面中打开,没什么奇怪的,因为router-link最终会被转换为a标签 -->
  <router-link :to="'/detail/'+goods.id"><img :src="goods.defaultImg" /></router-link>
</div>

路由的模块化

在router目录中创建routes.js文件，在该文件中引入路由并且注册路由
将包含路由对象的数组放在该文件中，并且暴露出去
原本的路由对象只需要引入暴露的路由文件即可

import routes from './routes'
// 模块化后的
export default new VueRouter({
   
   
  routes:routes
})

路由的滚动行为

点击跳转到详情页，滚动条会出现在最下方，我这里如果打开控制台会出现在最下方
可以通过创建VueRouter的时候给配置对象增加一个参数
滚动行为来控制：官方文档
问题：我这里加了好像没有效果，如果正常跳转默认就是在top，打开控制台添加了之后也不是在最上面

export default new VueRouter({
   
   
  routes:routes,
  scrollBehavior(to, from, savedPosition) {
   
   
    // 始终滚动到顶部
    return {
   
    x:0,y:0 }
    // return {top:0}
  },
})

数据的动态展示

获取数据

写请求接口函数
写vuex,查看返回的数据格式,对于复杂的数据格式使用getters简化获取
在Detail中发送请求将请求结果存储到vuex中

小窍门:通过路由传递过来的参数,为了方便使用,可以在data中定义参数数据,在beforeMount钩子函数中给其赋值,这样就可以直接使用了,或者可以定义计算属性

请求接口函数:

// 获取详情页信息的接口请求函数
export const reqDetailInfo= (skuId)=>{
   
   
  return request({
   
   
    url:'/item/'+skuId,
    method:"get"
  })
}

vuex代码:

import {
   
   reqDetailInfo} from '@/api'
const state = {
   
   
  detailInfo: {
   
   }
}
const mutations = {
   
   
  RECEIVE_DETAILINFO(state, detailInfo) {
   
   
    state.detailInfo = detailInfo
  }
}
const actions = {
   
   
  async getDetailInfo({
    
     commit }, skuId) {
   
   
    const result = await reqDetailInfo(skuId)
    if (result.code === 200) {
   
   
      commit('RECEIVE_DETAILINFO', result.data)
    }
  }
}
const getters = {
   
   
  // 复杂的数据简化获取方式,并且需要注意,如果没有获取到数据,则给定一个原本的空的数据类型,防止发生错误
  categoryView(state){
   
   
    return state.detailInfo.categoryView || {
   
   }
  },
  skuInfo(state){
   
   
    return state.detailInfo.skuInfo || {
   
   }
  },
  spuSaleAttrList