vue中通过this.$router.push 到当前页面，只是参数不同，页面没有重新请求数据？

Question

page.vue 页面

this.$router.push({
    path: '/shopDetail',
    query: {
        shopNo: shopNo||"SHOPc22185ebe6df435ab90142d89c7e3829"
    }
})

问题
页面没有重新请求数据....
需要刷新一下页面才有新的店铺数据

//vue-router 官方demo 好像也不行
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

我直接watch : $route 会报错

Answer 1

非直接方案：
如果是同页面，不建议用路由方式实现。
完全可以页面内部逻辑处理即可。

比如：

// <div>shopName:{{shop.shopName}}</div>
export default{
    data(){
        return {
            shop:{shopName:"shopName"},
            shopNo:"123"
        };
    },
    mounted(){
        // 初始时加载店铺数据
        this.loadShop();
    },
    watch:{
        // shopNo改变时重新加载
        shopNo:function(newShopNo){
            this.loadShop();
        }
    },
    methods:{
        loadShop(){
            // 调用API获取shop数据
            var shop = {/*获取到的数据*/};
            this.shop=shop;
        }
    }
}