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

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

阅读量：4030 次

发布时间：2019-05-24

本文共 3684 字，大约阅读时间需要 12 分钟。

一、页面跳转方式

在页面中有两种跳转方式，第一种跳转方式是
使用 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 值就可以，代码如下所示：


       
        
    {
   {
    item.title }}
    
            
                 ￥{
   {
    item.sell_price }}            ￥{
   {
    item.market_price }}        
        
                 热卖中            剩{
   {
    item.stock_quantity }}件

在 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]            }        })    }

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


   
       
    
     商品参数
    
    
            
                 
      商品货号：{
   {
    goodsInfo.goods_no }}
            
      库存情况：{
   {
    goodsInfo.stock_quantity }}
            
      上架时间：{
   {
    goodsInfo.add_time | dateFormat}}
        
     
    
    
    
            
     
      图文介绍
             
     
      商品评论

三、编程式跳转

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


       
        
    {
   {
    item.title }}
    
            
                 ￥{
   {
    item.sell_price }}            ￥{
   {
    item.market_price }}        
        
                 热卖中            剩{
   {
    item.stock_quantity }}件

在 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]            }        })    }

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


   
       
    
     商品参数
    
    
            
                 
      商品货号：{
   {
    goodsInfo.goods_no }}
            
      库存情况：{
   {
    goodsInfo.stock_quantity }}
            
      上架时间：{
   {
    goodsInfo.add_time | dateFormat}}
        
     
    
    
    
            
     
      图文介绍
             
     
      商品评论