vue-router 具有不同参数的相同路由答案

【问题标题】：vue-router same route with different paramvue-router 具有不同参数的相同路由
【发布时间】：2018-01-07 23:44:29
【问题描述】：

我在/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);
}

【问题讨论】：

您确定负责该路线的代码正确且有效吗？当您手动转到entry/13 时会发生什么？
如果你的 routes 对象包含以下路由应该可以工作：{ path: '/entry/:pageNum', name: 'Entries' } 。这就是你使用的结构吗？
@BelminBedak 如果我尝试不同的命名路线，它会起作用。所以，我相信是的。
@Joos，我更新了我的问题，是的，我的定义是正确的。
会不会是因为e是数字而不是String，路由器不知道怎么处理？只是在这一点上猜测：P

标签： vue.js vue-router

【解决方案1】：

我用:key 解决了我的问题。这样，我保证只要 $route 发生变化，所有路由器视图内容都会重新渲染。

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

【讨论】：

【解决方案2】：

找到答案了。

似乎vue-router 按预期工作。就我而言，还有另一个问题。

如果我在通用组件中也有以下代码，我相信它会循环并产生错误。

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

在我的例子中，我从通用组件中删除了观察者并且它起作用了。

【讨论】：

很棒的解决方案，谢谢！

【解决方案3】：

如果您决定以编程方式更改路由参数，则应使用replace 而不是push，如下所示：

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

【讨论】：