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

秒速五厘米 2023-07-24 08:07 25阅读 0赞

#### 一、页面跳转方式 ####

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

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

#### 二、标签式跳转 ####

1.  在 `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>

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

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

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

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

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

created () { 
        this.getGoodsInfo()
    }

1.  在详情页中，在 `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]
                }
            })
        }

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

<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>

#### 三、编程式跳转 ####

1.  在 `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>

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

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

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

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

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

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

created () { 
        this.getGoodsInfo()
    }

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