When multiple routes share the same component, switching routes does not refire the hook function on the component page. To refire the hook function. Get the latest data. There are two ways:

Method 1: If two child components A and B under the parent component need to share the same component, add A key to the parent component and router-view, and ensure that the key value is unique like the ID value. In this way, the corresponding subcomponent route will trigger the corresponding subcomponent hook function based on the corresponding key value. Method 2: Process data by listening for route changes.

Methods a

Add key controls to the Router-View: The downside is that if the router-View contains other components, switching between them will cause them to re-render as well. The problem is that switching routes will blink a little. All hook functions are refired after the switch.

1. The app. Vue

<router-view :key="key" /> // The key attribute must be added to refire the hook function every time a route is entered. // console.log(this.$route.fullpath); // console.log(this.$route.fullpath); return this.$route.fullPath } }, 2. In the index.js file: Let multiple routes share the same component, with paths pointing to the same component. Ensure that the path and name attributes of a route are unique. {path: '/role', name: 'role', // Role meta: {requireAuth: true // indicates that this route requires login verification to enter before switching paths to jump routes}, component: () => import('@/views/policy/policy.vue'), }, { path: '/strategy', name: 'strategy', meta: { requireAuth: }, Component: () => import('@/views/policy/policy.vue'),},Copy the code

When multiple pages share the same component: This method causes all child components to be switched and re-rendered. If only A and B components need to be shared under the parent component, and C and D components need not be shared, switching C and D components will also re-render C and affect performance.

You can also override the initial data by listening for changes in the route

Method 2: re-trigger the hook function by listening for routes

1. watch: { $route:{ handler:'resetData', } }, Methods :{resetData() {if(this.$route.fullPath=='/strategy'){// }}Copy the code