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

最新推荐文章于 2024-07-03 15:52:02 发布

原创最新推荐文章于 2024-07-03 15:52:02 发布 · 1.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #java #javascript #vue.js

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何实现列表页到详情页的跳转，包括标签式跳转和编程式跳转两种方式。标签式跳转利用router-link组件，而编程式跳转则使用this.$router.push方法。

一、页面跳转方式

在页面中有两种跳转方式，第一种跳转方式是
使用 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>