Vue route jump does not refresh

execute the this.$router.push () method on the "game-detail" page, and jump to the" game-detail", page without refreshing.
because the body of the route has not changed, only the passed parameter id
, so there is no jump from "game-detail?id=1" to" game-detail?id=2",.
but you can listen for $route, to listen for id changes in watch.

then I listened to the route in watch and clicked on it. The methods function that gets the page data is called again.
wants to simulate page refresh by refreshing the page data and zeroing the scroll bar.

and then. After clicking. The data has been refreshed and the page has not changed.

the parent component is passed to the child component through props. What should I do in the child component?

just now Baidu found that some people said that it was watch and deep listening in the sub-component,
and then I heard that the data had changed and then it was still not possible to assign values in the sub-component.

part of parent component:

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

watch section:

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

part of sub-components:

<div>{{ getData.name }}</div>
props: ["data"]
data:getData: this.data[0]
Apr.09,2021

was invited to answer.

the routing parameters change but the page is not refreshed. This is the default way to handle the reuse of Vue components
ide/essentials/dynamic-matching.html-sharp%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96" rel=" nofollow noreferrer "> is written in the

document.

if you don't want to reuse, add a key
< router-view: key= "$route.fullPath" > < / router-view >

to the router-view of the parent component.

you can solve it with 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>

then inject: ["reload"] in the routing component you need to use, and call the reload method in the logic code of the current push page.


from the point of view of the code, your route has not changed at all. How could you start watch

try writing getData as a calculation attribute

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

ide/advanced/data-fetching.html-sharp%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%90%8E%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE" rel=" nofollow noreferrer "> https://router.vuejs.org/zh/g.

watch: {
  // 
  '$route': 'fetchData'
}

use vuex, otherwise it will be too troublesome


whether the two routes use the same component, that is, it will not be refreshed.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b38ff3-e6aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b38ff3-e6aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?