vue dynamic routing switch refresh

Register dynamic routes 

    {
      path: '/r/:id',
      name: 'r',
      component: R1
    }

 

When the route is switched, vue will reuse this component and will not trigger the created and mounted methods of the route component

    <router-link tag="div" to="/r/1">1</router-link>
    <router-link tag="div" to="/r/22">22</router-link>
    <router-link tag="div" to="/r/333">333</router-link>
    <router-view></router-view>

 

The solution is to add a key to the router-view, generally set to the full path or id field

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

This will re-trigger the created and mounted methods when switching components