This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

This is a very common problem when a push is used to add a new record to the history stack, and when the exact same route is added again, it will not be refreshed again.

Impatient can directly look at the ninth way, the absolute child, applicable to all scenarios.

There are several solutions:

1. Add the activated function.

Activated () {insert code chip here}Copy the code

2. Listen through routes. Locate the mounted function under the Watch route

// Not recommended, poor user experience
watch: {
	'$route' (to, from) {
    // The route changes. The page is refreshed
	this.$router.go(0); }},// This method makes one more request
watch: {
	'$route' (to, from) {
    // Locate the method in mounted
	this.getTableData(); }},Copy the code

3. Use VUE’s V-IF to control DOM

Note: this.$router.push uses query, not Params

<script>
export default {
  name: 'App'.data() {
    return {
      msg: 'Welcome to Your Vue.js App'.searchText:' '.RouteState:true,}},methods: {
    reload(){
      this.RouteState = false;
      this.$nextTick(() = >{
        this.RouteState = true;
      });
      this.$router.push({name: 'doclist'.query: {
             keywords:this. SearchText}}); }}},Copy the code

4. Use beforeRouteUpdate

  beforeRouteUpdate (to, from, next) {
	  this.lang = to.params.lang;
	  this.setCode();
	  next();
	}
Copy the code

5. Set the corresponding meta property through the component navigation guard

 beforeRouteEnter: (to, from, next) = > { // Write to the current component
 to.meta.keepAlive = false 
 next()
},
 beforeRouteLeave: (to, from, next) = > { // Write in the previous component
 to.meta.keepAlive = false
 next()
}
Copy the code

Normally, the above methods will work, but sometimes there are some special cases:

6. Add the key=”$route.fullPath” attribute to the router-view.

	 <router-view :key="$route.fullPath" />
Copy the code

7. Cache keep-alive

// Exclude and :key="$route.fullPath"
	<keep-alive exclude="searchResult">
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
Copy the code

8. Window addEventListener

	 The hash mode works by using the hashchange event
    window.addEventListener('hashchange'.() = > {
      let currentPath = window.location.hash.slice(1)
      if (this.$route.path ! == currentPath) {this.$router.push(currentPath)
      }
    }, false)
Copy the code

Add date:new date ().getTime()

A thief’s approach, one line of code, works in every situation

	 this.$router.push({
        path: "/homePage/searchResult".query: {
          keywords: this.input,
          type: this.type,
          date:new Date().getTime()
        }
      })
Copy the code