Vue.js vue路由器具有不同参数的相同路由

我在

/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路由器

工作正常。就我而言，还有另一个问题

若我在通用组件中也有下面的代码，我相信它会循环并产生错误

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

---

在我的例子中，我从通用组件中删除了watcher，它工作了。

我用

:key

解决了我的问题。这样，我保证只要有$route更改，所有路由器视图内容都将重新呈现

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

---

如果您已决定以编程方式更改路线参数，则应使用

替换

而不是

推送

，如下所示：

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

---

您确定负责该路线的代码正确有效吗？如果routes对象包含以下路由：{path:'/entry/:pageNum'，name:'Entries'，则手动转到

条目/13

时会发生什么情况。这就是你正在使用的结构吗？@BelminBedak如果我尝试不同的命名路线，它会起作用。所以，我相信是的。@Joos，我更新了我的问题，是的，我的定义是正确的。可能是因为e是一个数字而不是字符串，而路由器不知道如何处理它吗？在这一点上只是猜测：P

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