Vue实现路由进入商品详情页面二

一、路由
首先需要配置路由，就是点击good组件进入goodDetail组件 
配置路由如下

 {
     path: '/goodDetail',
     component:goodDetail
 }

同时在good组件中写入如下点击事件，路由中加入查询参数，也就是商品的id

//点击路由到商品详细信息页
      selectGood(){
        router.push({
          path: 'goodDetail',
          query:{goodId:this.goodDetail.id}})
      }

二、在goodDetail组件中接收路由参数
goodDetail中的代码如下

export default{
    data(){
      return {
        id: this.$route.query.goodId,
        loading: false,
        selectedGood: []
      }
    },

    created(){
      this.fetchData();
    },

    methods:{
      fetchData(){
        this.loading = true;

        //拿到查询字段，商品的id后进行http请求
        var id = this.id;
        this.$http.get('/api/goods/' + id)
          .then(response => {
            this.selectedGood = response.data.data;
          }, error => {
            console.log(error);
          })

        this.loading = false;
      }
    }
  }

转载自： https://blog.csdn.net/HaiJing1995/article/details/72779081