title: vue-router same route with different param
body: <p>I am on the <code>/entries/12</code> route. On the same component I would like to push <code>/entries/13</code> when user clicks the next button.</p>
  
  <p>Code is like :</p>
  
  <pre><code>//e is the next page number. 
   this.$router.push({ name: 'Entries', params: { pageNum: e }});
  </code></pre>
  
  <p>I get below error:</p>
  
  <p><a href="https://i.stack.imgur.com/pGlQI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pGlQI.png" alt="enter image description here"></a></p>
  
  <p>If i try different route that works.</p>
  
  <p>Whole code: </p>
  
  <pre><code>&lt;template&gt;
  
  
      &lt;div class="entries"&gt;
  
          &lt;generic-entries @clicked="clicked" &gt;&lt;/generic-entries&gt;
  
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import GenericEntriesComp from '@/components/GenericEntriesComp';
  
      export default{
          name: 'entries-comp',
  
          components: {genericEntries: GenericEntriesComp},
          mounted(){
              var params = {id : this.$route.params.pageNum}
              this.$store.dispatch("getEntries",params);
          },
          methods: {
  
              clicked(e){
  
                  this.$router.push({ name: 'Entries', params: { pageNum: e.toString() }});
  
              },
              loadData(){
                  var params = {pageNum : this.$route.params.pageNum}
                  this.$store.dispatch("getEntries", params)
              }
          },
          computed: {
              items(){
                  return this.$store.state.entries
              },
          },
          watch: {
              '$route': 'loadData'
          }
      }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Btw the error comes from :</p>
  
  <pre><code>Vue.config.errorHandler = function (err, vm, info) {
      console.error(err);
  }
  </code></pre>