vue中跳转页面逻辑

跳转详情页面具体代码

写这个页面需要安装两个

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>