First, find the problem

When I completed the MV module imitating the netease Cloud project, MV details components were used in different MV, but the contents rendered in the components were different according to the ID, routing and content of different MV.

When I am in a MV details page, through the relevant recommendation inside another MV.

My current route is /mv/details? Id =123456, click another MV to change the route to/MV /details? Id =654321, the page should be refreshed. The page content changes from MV with ID 123456 to the content with ID 654321MV.

However, there are only route changes and no component data updates, just the old MV information.

Second, the reason why

The official website of VUE explains in detail that using the same route with different parameters essentially reuses the same component instance. By default, the cache policy is adopted when switching routes, and the current routing component is not refreshed. Therefore, the lifecycle hook of the component is not invoked.

Third, solve the problem

Since my rendering MV detail component is a child component, I used it when I first looked up the solution.

Provide and Inject are used together to overload routes using the V-IF principle

Destroy and rebuild with v-IF to force the page to be re-rendered

1. Parent component

<template>
    <div>
    	<router-view v-if="isRouterAlive" ></router-view>
    </div>    
</template>
<script>
export default{
 // Some method properties exposed by the parent component
  provide () {
	return {
           // Expose the reload method of the parent component
      		reload: this.reload
     }
    },
   data(){
        return{
            isRouterAlive: true}},methods: {// This is the method to expose to the child to refresh the child
         reload () {
      		this.isRouterAlive = false
             this.$nextTick(() = > (this.isRouterAlive = true))}}}</script>
Copy the code

2. Subcomponents

// Receive the reload method exposed by the parent component
inject: ['reload'].methods:{
    ...
    // This is a function called from the current MV to another MV, passing the id of the mv to go to, so that the route can be defined
    toOtherMV(id){
         this.$router.push(`/mv/detail? id=${id}`)
     // Refresh the component
        this.reload()
	}
}
Copy the code

Isn’t it perfect? You think this is the end of it?

This does solve the above problem, but when you click the back arrow in the upper left corner to return the MV details from MV ID 654321 to MV ID 123456, the component still does not refresh. Let’s just say it’s just part of the way forward.

So what about retreating?

Simple, in the child component listen for route changes and refresh the component when the route changes, in toOtherMV function just modify the route.

Child components

Watch: {// Listen for route changes $route (to, from) {// Component refresh this.reload()}}, // receive the parent component exposed reload method inject: ['reload'], methods:{ ... ToOtherMV (id){this.$router.push(' /mv/detail? id=${id}`) } }Copy the code

Dangdang when! This solves the problem that components do not refresh when jumping to the same route but with different parameters.