vue same route jump forced refresh of the routing component operation

I believe that everyone may encounter this kind of demand during normal development. When opening the menu page, clicking the menu again requires refreshing the component (destroy and then create). If the route of vue itself does not do this, then it can only use some slutty operations.

1. Bind a random query parameter on the routing jump of the menu, such as a timestamp or a random number:

this.$({
  path:"/xxx",
  query:{
    t:(),
  },
});

This operation triggers a routing change, but the state within the component is not initialized because the component is not rebuilt.

2. Bind the key value on the routing container:

<router-view :key="$ + $"></router-view>

The task is done, and the component is forced to refresh through the change of the key value.

Supplementary knowledge:[vue-router] Duplicate named routes definition

Browser alarm information

[vue-router] Duplicate named routes definition: { name: “index”, path: “/index” }

Explain the duplication of the name attribute of the route name

For example:

{ path: ‘', name: ‘index', redirect: ‘/fiibox/personHome' },

correct:

{ path: ‘', name: ‘', redirect: ‘/fiibox/personHome' },

The above article Vue's same route jump to force refresh the routing component operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.