vue路由跳转不刷新

Question

在'game-detail'页面执行this.$router.push()方法，跳转到'game-detail'，页面不刷新。
因为路由主体没变，变的只是传递的参数id
所以从'game-detail?id=1'到'game-detail?id=2'，并没有跳转。
但是可以在watch里监听$route,监听到id的变化。

后来我就在watch里边监听路由，点击后……重新调用了获取页面数据的methods函数。
想通过刷新页面数据，再加上把滚动条归零，来模拟页面的刷新。

然后……点击后……数据刷新了，页面没变化……

父组件是通过props传递给子组件的，请问我应该在子组件里怎么做呢？

刚才百度了发现有的人说是在子组件里watch并且deep监听，
然后我监听到数据变化了以后在子组件里进行赋值也还是不行。

父组件部分内容：

<child :data="dataList"/>
data里边：dataList: []
this.$http.get().then((res)=>{
    this.dataList.splice(0, this.dataList.length, ...res)
})

watch部分：

watch: {
    $route(to, from) {
        this.$http.get().then((res)=>{
            this.dataList.splice(0, this.dataList.length, ...res)
        })
    }
}

子组件部分内容：

<div>{{ getData.name }}</div>
props: ['data']
data里边：getData: this.data[0]

Answer 1

受邀来答。

路由参数变化但是页面没有刷新这是Vue的组件复用的默认处理方式
文档里面写了

不想复用的话，就在父组件的router-view上加个key
<router-view :key="$route.fullPath"></router-view>

Answer 2

使用provide/inject就可以解决了。
App.vue：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" v-cloak/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    provide() {
      return {
        reload: this.reload
      };
    },
    data() {
      return {
        isRouterAlive: true
      };
    },
    methods: {
      //刷新当前页面
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function() {
          this.isRouterAlive = true;
        });
      }
    }
  }
</script>

然后在你需要用到的路由组件中inject: ["reload"], 在push当前页面的逻辑代码中调用reload方法就行了。

Answer 3

从代码看 你的route压根就没有变化呀 怎么会出发watch呢

试试将getData写成计算属性

computed:{
  getData (){
    return this.data[0]
  }
}

Answer 4

https://router.vuejs.org/zh/g...

watch: {
  // 如果路由有变化，会再次执行该方法
  '$route': 'fetchData'
}

Answer 5

用vuex 吧，不然太麻烦了

Answer 6

是不是两个路由用的是同一个组件，那就是不刷新的。