vue-router 具有不同參數的相同路由

Question

我在/entries/12路線上。 在同一個組件上，當用戶單擊下一個按鈕時，我想推送/entries/13 。

代碼是這樣的：

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

我得到以下錯誤：

如果我嘗試不同的路線。

全碼：

<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>

順便說一句，錯誤來自：

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

Answer 1

我用:key解決了我的問題。 這樣，我保證在 $route 更改時所有路由器視圖內容都將重新呈現。

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

Answer 2

找到了答案。

似乎vue-router按預期工作。 就我而言，還有另一個問題。

如果我在通用組件中也有以下代碼，我相信它會循環並產生錯誤。

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

在我的情況下，我從通用組件中刪除了觀察者並且它起作用了。

Answer 3

如果您決定以編程方式更改路由參數，那么您應該使用replace而不是push ，如下所示：

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