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

一、页面跳转方式

  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 }})
    }
  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>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读