vue-router same route with different param

Question

I am on the /entries/12 route. On the same component I would like to push /entries/13 when user clicks the next button.

Code is like :

//e is the next page number. 
 this.$router.push({ name: 'Entries', params: { pageNum: e }});

I get below error:

If i try different route that works.

Whole code:

<template>


    <div class="entries">

        <generic-entries @clicked="clicked" ></generic-entries>

    </div>

</template>

<script>
    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'
        }
    }


</script>

Btw the error comes from :

Vue.config.errorHandler = function (err, vm, info) {
    console.error(err);
}

Answer 1

I solved my problem with :key. This way, I guarantee that all router-view content will be re-rendered whenever there is a $route change.

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

Answer 2

Found the answer.

Seems vue-router works as expected. In my case there were another problem.

If I have below code also in generic component I beleive it loops and produce an error.

watch: {
        '$route': function(){
            this.loadData();
        }
    }

In my case I removed the watcher from the generic component and it worked.