Javascript Vue组件默认数据值将覆盖我在beforeRouteUpdate中设置的值

我使用vue路由器的beforeRouteEnter和beforeRouteUpdate从REST API获取数据

<template>
  <div>
    <h2>{{ league.name }} </h2>
    <user-list :users="league.leaderboard" type="list"/>
  </div>
</template>

<script>
import UserList from '../components/UserList.vue'
import League from '../model/League'
export default {

    components: {
        UserList
    },

    data() {
        return {
            league: { name: 'init', leaderboard: [] },
        }
    },

    methods: {
        setLeague(league) {
            this.league = league
        }
    },

    beforeRouteEnter(to, from, next) {
        League.$find(to.params.league)
            .then(league => {
                next(vm => {
                    vm.league = league
                })
            })
            .catch(err => {
                if(err.response && err.response.status == 404)
                    next('/404')
                else
                    next(vm => vm.error = err)
            })
    },

    watch: {
        league() {
            console.log('league changed ', this.league)
        }
    },

    beforeRouteUpdate(to, from, next) {
        this.league = null
        League.$find(to.params.league)
            .then(league => {
                this.setLeague(league)
                console.log('beforeUpdate: ', this.league)
                next()
            })
            .catch(err => {
                if(err.response && err.response.status == 404)
                    next('/404')
                else {
                    this.error = err
                    next()
                }
            })
    }
}
</script>

<style>

</style>

{{league.name}
从“../components/UserList.vue”导入用户列表
从“../model/League”导入联盟
导出默认值{
组成部分：{
用户列表
},
数据（）{
返回{
联盟：{name:'init'，排行榜：[]}，
}
},
方法：{
赛特联盟（联盟）{
这个联盟
}
},
路由前（到、从、下一个）{
联盟$find（到参数联盟）
.然后（联盟=>{
下一步（vm=>{
联盟
})
})
.catch（错误=>{
if（err.response&&err.response.status==404）
下一个（“/404”）
其他的
下一步（vm=>vm.error=err）
})
},
观察：{
联盟（）{
console.log（'league changed'，this.league）
}
},
路由更新前（到、从、下一个）{
this.league=null
联盟$find（到参数联盟）
.然后（联盟=>{
这是赛特联盟（联盟）
console.log（'beforeUpdate:'，this.league）
下一个（）
})
.catch（错误=>{
if（err.response&&err.response.status==404）
下一个（“/404”）
否则{
this.error=err
下一个（）
}
})
}
}

beforeRouteEnter防护装置按预期工作

在我的应用程序中，有一种常见的情况，路由从

/leagues/1

更改为

/leagues/1

，因此我的组件被重用，beforeRouteUpdate保护被触发。在那里，获取其余数据，并通过此.setLeague（）设置联盟数据。console.log调用输出新的联盟数据。但是，当调用next（）时，```this.league``将被重写为我在数据函数中指定的默认值（名称：“init”等）。我不知道为什么

我基本上直接从vue文档中改编了这段代码

---

需要注意的一件有趣的事情是，

this.league=null

会触发观察者，而

this.setLeague

不会。此外，在更新之前登录的输出不是vue观察者，而是普通联盟对象。我尝试将

this.setLeague

调用更改为

this.league=league

，但没有效果。

我也遇到了同样的问题，所以我创建了新的测试组件，并开始测试它。我发现

created（）

，

mounted（）

，

data（）

钩子触发了两次，这意味着路由器每次都会重新创建组件，而不是缓存组件。然后我查看了应用程序组件，并保存了它的原因。我为每个路由分配了唯一的密钥，因此它将使用不同的组件实例，而不是每个路径使用一个，如/test/page/1和/test/page/2。因此，我已经删除了它，现在一切都按预期工作

所以，如果您在主组件中看到与下面相同的代码，请将其替换为最后一个

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

---

将/leagues/1更改为/leagues/1意味着什么？您是否解决了此问题？我现在也有(

<template>
  <router-view></router-view>
</template>