Keeping Vue.js routes on the same page

Question

This is the first time I've encountered this, when I click the next button in the address bar, the address changes but the page remains the same as if I didn't click the next button. However, new steps are shown below. Hope someone can provide a solution. Thanks in advance.

<template>
    <div>
      <button @click="send" >Next</button>
   </div>
</template>

<script>
  methods:{
    send(){
   this.$router.push('/page/commande/1')
}
</script>

//router
{
    path:'/page/commande/1',
    name:'ConfirmationSend',
    component:() => import('../views/send.vue'),
  },

Answer 1

Hey, you should add the full path of the route (fullPath) as the key of the route view (router-view). This way the page/component will only be re-rendered when the url parameters change.

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