跳转详情页面具体代码

写这个页面需要安装两个

1.安装axios命令

Cnpm install axios --save

2.安装vant

Cnpm install vant --save

在index.Js里面配置要跳转页面的路由

在main.js里面用vue引入刚安装上的两个插件

这个是home.vue里的内容

 <template>

  <div>

//下面那个正在加载时给它个判断

    <div v-if="isShow">正在加载......</div>

 

    <div class="div1"> 

    <div v-for="(item,index) in goods" :key="index"

    @click="gotoDetails(item.id)">

      <img :src="item.mainPic" width="150px" />

      <p>{{item.title}}</p>

      <p>

        <span style="color:red">{{item.actualPrice}}</span>

        <s style="font-size:12px">{{item.originalPrice}}</s>

      </p>

      <p>销售:{{item.monthSales}}</p>

    </div>

    <div v-for="(item,index) in goods" :key="index"

    @click="gotoDetails(item.id)">

      <img :src="item.mainPic" width="150px" />

      <p>{{item.title}}</p>

      <p>

        <span style="color:red">{{item.actualPrice}}</span>

        <s style="font-size:12px">{{item.originalPrice}}</s>

      </p>

      <p>销售:{{item.monthSales}}</p>

    </div>

</div>

  </div>

</template>

 

 <script>

export default {

  data() {

    return {

      goods: [],

      isShow: true

    };

  },

  mounted() {

this.$axios

//下面那个是在官网中引入的Apl接口

      .get(" http://api.kudesoft.cn/tdk/goods", {

        params: {

          pageId: 2,

          cids: 6

        }

      })

      .then(res => {

        let goods = res.data.data.data.list;

        this.goods = goods;

        this.isShow = false;

      })

      .catch(err => {

        console.log(err);

      });

  },

  methods: {

    gotoDetails(id) {

      this.$router.push({

        path: "/details",

        query: {

          id

        }

      });

    }

  }

};

</script>

 

 <style>

 .div1{

   width: 100%;

   display: flex;

   justify-content: space-between;

 }

</style>

这个是在跳转页面是要创建的跳转到的页面 details.vue

<template>

  <div>

    <button @click="back">返回</button>

    <van-swipe :autoplay="3000" indicator-color="white" style="width:200px">

      <van-swipe-item v-for="(img,index) in goodItem.imgs" :key="index">

        <img :src="img" alt width="200px" />

      </van-swipe-item>

    </van-swipe>

    <div>{{goodItem.title}}</div>

    <div>

      <a :href="goodItem.couponLink">领劵</a>

    </div>

    <h1>商品详情:</h1>

    <div>

      <img v-for="(url,index) in goodItem.detailPics" :key="index" :src="url" width="600px" />

    </div>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      goodItem: {}

    };

  },

  mounted() {

    let id = this.$route.query.id;

    this.$axios

      .get("http://api.kudesoft.cn/tdk/details", {

        params: {

          id

        }

      })

      .then(res => {

        this.goodItem = res.data.data.data;

        this.goodItem.imgs = this.goodItem.imgs.split(",");

        this.goodItem.detailPics = this.goodItem.detailPics.split(",");

      })

      .catch(err => {

        console.log(err);

      });

  },

  methods: {

    back() {

      window.history.back();

    }

  }

};

</script>

<style>

</style>

vue中跳转页面逻辑的更多相关文章

  1. 修改vue中的挂载页面(index.html)的路径

    修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501    版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...

  2. vue中如何刷新页面

    vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...

  3. 简述在Js或Vue中监听页面的刷新、关闭操作

    1.背景 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.而最近在做项 ...

  4. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  5. vue 项目 跳转 页面 不刷新 问题

    vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛  然后返回一个下载链接  前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...

  6. laravel中的登录页面逻辑

    <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades ...

  7. 在taro中跳转页面的时候执行两遍componentDidMount周期的原因和解决方法

    在做taro跳转的时候,发现在跳转后的页面会走两遍componentDidMount周期,查看了github上的issues,发现是跳转路由带参为中文引起的,只要把中文参数进行urlencode解决 ...

  8. vue中如果在页面中v-model的是字典,那么在定义字典的时候,需要明确定义键值为''或者[],否则给字典的键值赋值后页面不显示

    如题 在template模板中 {{}} {{form_temp.blOwnerMemberList}} #是字典的形式哦 {{}} 在return的属性中 form_temp: { blOwnerM ...

  9. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

随机推荐

  1. CSS、bootstrap4等相关疑难杂症

    说明 本篇博客仅用于个人随笔,所以内容比较随意. 在bootstrap4中,引入样式后,按钮.输入框等组件的选取状态会出现黑色加重边框,该如何解决? 解决示例: input:focus{outline ...

  2. ASP.NET Core 3.x启动时运行异步任务(二)

    这一篇是接着前一篇在写的.如果没有看过前一篇文章,建议先去看一下前一篇,这儿是传送门   一.前言 前一篇文章,我们从应用启动时异步运行任务开始,说到了必要性,也说到了几种解决方法,及各自的优缺点.最 ...

  3. MySQL中的find_in_set()函数使用技巧心得与应用场景总结

    Author:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! CSDN@极客小俊,CSDN官方首发原创文章 企业博客 CSDN.com 个人博 ...

  4. java学习网站汇总

    1.https://blog.csdn.net/qq_35571554/article/details/82759668 B+树原理漫画讲解2.https://blog.csdn.net/moakun ...

  5. Python练习题 006:输出九九乘法表

    [Python练习题 006] 输出九九乘法表 --------------------------------------------------- 照理这题不难,逻辑关系弄对了就好办,但数学渣的我 ...

  6. 深入解读 ASP.NET Core 身份认证过程

    长话短说:上文我们讲了 ASP.NET Core 基于声明的访问控制到底是什么鬼? 今天我们乘胜追击:聊一聊ASP.NET Core 中的身份验证. 身份验证是确定用户身份的过程. 授权是确定用户是否 ...

  7. 【CSP2019-J】游记

    看我朋友们的博客里面都写了游记,我也来凑个热闹(雾) day1# 介于是\(CSP-J\),我们是比赛当天走的,上午卡点到.一路上不允许玩游戏,于是就在路上看了一路的鬼畜视频,然后看了看对拍的板子(然 ...

  8. 【记】《.net之美》之读书笔记(二) C#中的泛型

    前言 上一篇读书笔记,很多小伙伴说这本书很不错,所以趁着国庆假期,继续我的读书之旅,来跟随书中作者一起温习并掌握第二章的内容吧. 一.理解泛型 1.为什么要使用泛型?-----通过使用泛型,可以极大地 ...

  9. java 反射之静态and动态代理

    首先说一下我们什么情况下使用代理? (1)设计模式中有一个设计原则是开闭原则,是说对修改关闭对扩展开放,我们在工作中有时会接手很多前人的代码,里面代码逻辑让人摸不着头脑(sometimes the c ...

  10. Linux 下 svn 场景实例及常用命令详解

    一.SVN使用场景实例 问题: 在使用svn做为版本控制系统的软件开发中,经常会有这样的需求:在工作复本目录树的不同目录中增加了很多文件,但未纳入版本控制系统,这时如果使用svn add命令一个一个的 ...