Problem Description:

In keep-alive, the corresponding route is refreshed when jumping to the specified route, but the other routes are not refreshed.
<transition name=
"fade"

mode=
"out-in"
>
<keep-ali
ve>



<router-view></router-view>

</keep-alive>
</transition>

There are several solutions:

1. Add include and cachedViews directly to keep-alive (Array type: component names containing vue files will be cached); Exclude does not include;

Note: All.vue component files must have the name attribute attached!! Vuex is recommended to manage cachedViews
<keep-alive :include=
"cachedViews"
>

<router-view></router-view>
</keep-alive>

2. Monitor changes to $router;
watch: {

// If the route changes, the method is executed again

"$route"
:
"fetchDate"
}

But executing fetchDate again when the page leaves is not what we need, so we can add execution logic on to and from, but it’s also very cumbersome

$router is read-only, so assignment is invalid
watch: {

$route (to, from) {

if
(list.indexof (from.path) > -1) {
// Add your own logic, list is the path you don't want cached
　　　　　　　　
this
.getData()

}
}
}

After keep-alive is added, the value of Life-cycle mounted>activated is added, and deactivated is executed when the route exits. In this way, more detailed operations can be performed on each inbound route

// Render on the server side
activated() {

// Refresh data only, do not change the overall cache

this
.fetchDate();

}

4. There are even simpler ones

<br><div>

<keep-alive>

<router-view v-
if
=
"$route.meta.keepAlive"
></router-view>

</keep-alive>

<router-view v-
if
=
! "" $route.meta.keepAlive"
></router-view>
</div>

5. There are also cases where the same VUE component is applied to different routes
{path:
'aaa'
,component:Mompage,name:
'mom'
},
{path:
'bbb'
,component:Mompage,name:
'momPlus'
}

By default, a created or Mounted hook on the vue is not triggered when the two pages switch. You need to manually watch:$router (back to above) or add a unique value to the router-view.
// Copy some random code here
<router-view :key=
"key"
></router-view>
computed: {

key() {

return
this
.$route.name ! == undefined?
this
.$route.name + +
new
Date():
this
.$route + +
new
Date()

}

}

Transfer to www.cnblogs.com/dansingal/p…