vue中如何实现列表的详情页获取及渲染

一、页面跳转方式

在页面中有两种跳转方式，第一种跳转方式是
使用 a 标签的形式进行跳转，也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转，也称之为编程式跳转。
在vue页面中，实现列表页跳转到详情页，也就有两种方式。第一种是标签式跳转，通过router-link的形式进行跳转。第二种是编程式跳转，通过 this.$router.push的形式进行跳转。
this.$route 和 this.$router 的区别：

this.$route 是路由参数对象，所有路由中的参数， params, query 都属于它
this.router 是一个路由导航对象，用它可以方便的使用 JS 代码，实现路由的前进、后退、跳转到新的 URL 地址

二、标签式跳转

在 vue 的列表页中，用 router-link 进行包裹起来，to 是跳转的路由，通过拼接详情页的 id 值就可以，代码如下所示：

<router-link :to="'/home/goodsInfo'+item.id" tag="div" class="goods-item" v-for="item in goodsList" :key="item.id"><img :src="item.img_url" alt=""><h1 class="title">{{ item.title }}</h1><div class="info"><p class="price"><span class="now">￥{{ item.sell_price }}</span><span class="old">￥{{ item.market_price }}</span></p><p class="sell"><span>热卖中</span><span>剩{{ item.stock_quantity }}件</span></p></div>
</router-link>

在 router.js 文件中，在 path 路径中，拼接跳转的详情页 id 值，也是使用了路由懒加载，代码如下所示：

{path: '/home/goodsInfo/:id',name: 'GoodsInfo',component: () => import('./components/goods/GoodsInfo.vue')
}

在详情页中，在 data 中，定义 id 值，id 的值为 this.$route.params.id，这个也是从列表页到详情页中获取到的对应的 id 值，将路由参数中的对象挂载到 id 上。定义 goodsInfo，默认为空对象，保存商品的信息数据，代码如下所示：

data() {return {id: this.$route.params.id, goodsInfo: {},}
}

在详情页中，在 created 生命周期钩子函数中，调用 getGoodsInfo() 方法，获取到商品的详情数据，代码如下所示：

created () {this.getGoodsInfo()
}

在详情页中，在 methods 中，定义 getGoodsInfo 方法，获取商品的信息，调用相应的接口，拼接详情id，获取详情页的数据，并且将数据保存到 goodsInfo 中，代码如下所示：

    getGoodsInfo() {this.$http.get('api/goods/getinfo/' + this.id).then((res) => {if (res.data.status === 0) {this.goodsInfo = res.data.message[0]}})}

在详情页中，渲染详情页的数据到页面上，代码如下所示：

<!-- 商品参数区域 -->
<div class="mui-card"><div class="mui-card-header">商品参数</div><div class="mui-card-content"><div class="mui-card-content-inner"><p>商品货号：{{ goodsInfo.goods_no }}</p><p>库存情况：{{ goodsInfo.stock_quantity }}</p><p>上架时间：{{ goodsInfo.add_time | dateFormat}}</p></div></div><div class="mui-card-footer"><mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button><mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button></div>
</div>

三、编程式跳转

在 vue 的列表页中，绑定一个 click 点击事件 goDetail(item.id)，携带参数 id，代码如下所示：

<div @click="goDetail(item.id)" class="goods-item" v-for="item in goodsList" :key="item.id"><img :src="item.img_url" alt=""><h1 class="title">{{ item.title }}</h1><div class="info"><p class="price"><span class="now">￥{{ item.sell_price }}</span><span class="old">￥{{ item.market_price }}</span></p><p class="sell"><span>热卖中</span><span>剩{{ item.stock_quantity }}件</span></p></div>
</div>

在 router.js 文件中，在 path 路径中，拼接跳转的详情页 id 值，也是使用了路由懒加载，同时，必须指明 name 的值，会用到命名路由，代码如下所示：

{path: '/home/goodsInfo/:id',name: 'GoodsInfo',component: () => import('./components/goods/GoodsInfo.vue')
}

在列表页中，在 methods 中，定义 goDetail 这个方法，传入 id 值，通过 this.$router.push 进行路由导航跳转，name 的值就是跳转路由的 name 的值，也是之前在 router.js 中定义的命名路由，传递命令路由，params 就是传递的 id 值，代码如下所示：

    // 点击后进入详情页goDetail (id) {this.$router.push({name: 'GoodsInfo', params: { id }})}

在详情页中，在 data 中，定义 id 值，id 的值为 this.$route.params.id，这个也是从列表页到详情页中获取到的对应的 id 值，将路由参数中的对象挂载到 id 上。定义 goodsInfo，默认为空对象，保存商品的信息数据，代码如下所示：

data() {return {id: this.$route.params.id, goodsInfo: {},}
}

在详情页中，在 created 生命周期钩子函数中，调用 getGoodsInfo() 方法，获取到商品的详情数据，代码如下所示：

created () {this.getGoodsInfo()
}

在详情页中，在 methods 中，定义 getGoodsInfo 方法，获取商品的信息，调用相应的接口，拼接详情id，获取详情页的数据，并且将数据保存到 goodsInfo 中，代码如下所示：

    getGoodsInfo() {this.$http.get('api/goods/getinfo/' + this.id).then((res) => {if (res.data.status === 0) {this.goodsInfo = res.data.message[0]}})}

在详情页中，渲染详情页的数据到页面上，代码如下所示：

<!-- 商品参数区域 -->
<div class="mui-card"><div class="mui-card-header">商品参数</div><div class="mui-card-content"><div class="mui-card-content-inner"><p>商品货号：{{ goodsInfo.goods_no }}</p><p>库存情况：{{ goodsInfo.stock_quantity }}</p><p>上架时间：{{ goodsInfo.add_time | dateFormat}}</p></div></div><div class="mui-card-footer"><mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button><mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button></div>
</div>

vue中如何实现列表的详情页获取及渲染相关推荐

爬取电影天堂电影列表和详情页
爬取电影天堂电影列表和详情页 import requests from lxml import etreebase_list_url = 'https://www.dytt8.net'headers ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
vue列表进入详情页实现上一篇下一篇功能
一.案例简介开发中有一个数据列表,每一行可以点击查看对应的详情页面.但是每次点击进入详情页面之后想要看下一条数据的详情需要关掉当前页面重新打开下一条,使用人员觉得比较麻烦,所以要求在详情页加上(上一 ...
微信公众号点击列表进入详情页
问题:微信公众号点击记录进入详情的时候,如果详情页代码是在当前页面,那么就没有进入页面记录,在点击返回的时候,会直接返回到最开始的地方,而非列表页. 解决:这时候就需要在点击列表的时候,插入一条记录, ...
Activity 切换动画（小米图库列表进入详情页，图片从固定位置放大进入，缩小退出）
直接上效果图 ok,来分析下如何实现的吧分析原理首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页:先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的 ...
Django----将后端数据展示在前端页面（展示用户列表及详情页）
需求描述: 如下图,将后台数据库中的用户列表数据展示出来,点击某用户后,进入信息详情页面解决方案: 涉及知识点:模板语言 django除了可以渲染html语言,还支持模板语言: {% for use ...
Uni-app 课程详情页获取课程详情 + 收藏 + 加入购物车
class-detail.vue > <template><view class="class-detail">&l ...
如何从详情页获取淘宝/天猫商品的分类？
熟悉淘宝/天猫的人应该都知道,在商品的详情页是没有显示商品的所属分类的.而"商品分类"对我们的数据分析又是一个很重要的参数,那如何获取这个信息呢? 通过分析发现有两种方法,下面一一 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...

vue中如何实现列表的详情页获取及渲染

一、页面跳转方式

二、标签式跳转

三、编程式跳转

vue中如何实现列表的详情页获取及渲染相关推荐

最新文章

热门文章