vue2.0 本页面跳转本页面，并且刷新数据

Question

写了个新闻Demo 文章页面有推荐列表，如何点击列表实现页面数据刷新呢

这个页面的文章数据我是通过主页 params 传过来的

<div class="content">
      <div class="top">
        <h2>{{ this.title }}</h2>
        <span>{{ this.team }}</span>
        <em>{{ this.time }}</em>
      </div>
      <div class="product">
        <img :src="this.img" alt>
        <div class="details" v-html=" this.content"></div>
        <div class="recommend">
          <em>――</em>
          <span>相关推荐</span>
          <em>――</em>
        </div>
      </div>

      <div class="bt" >
        <li v-for="(lists, conts) in $store.state.listNews" :key="conts">
          <div class="inner" @click="nextProduct(conts)">//这个地方不知道如何传参数
            <div class="wrap_l">
              <p>{{ lists.title }}</p>
              <div class="boot">
                <span>{{ lists.src }}</span>
              </div>
            </div>
            <div class="wrap_r">
              <img v-lazy="lists.pic" :key="lists.pic">
            </div>
          </div>
        </li>
      </div>
    </div>
  </div>

写了个点击方法

    nextProduct(conts){
      this.$router.push({path:'/words', query:{conts}})
    }

上面的点击方法，不知道怎么吧title, pic这些参数传过来方法，

现在写的这个点击地址是有变化的。

Answer 1

watch: {
    $route: {
      handler () {
        const { id } = this.$route.query

        // 更新数据
      },

      immediate: true
    }
  }

Answer 2

不要跳转，$emit事件出去，在你传过来数据父组件重新组织数据，改变data