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]
Vue.js vue-router
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.

Previous: Event.tartget.files [0] parameter in picture upload

Next: What is the reason why the default value of the previous one and the next one given by the left and right switch button is displayed on the button? Use the same plug-in, other page rotation does not have this default value

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu