Vue Component默认数据值覆盖我在beForeRouteUpdate中设置的内容

Question

我使用vue-router的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>

beforeRouteEnter防护装置按预期工作。

在我的应用程序中，有一种常见的情况，路由从/leagues/1更改为/leagues/1，因此我的组件被重用，beforeRouteUpdate保护被触发。在那里，获取其余数据，并通过此设置联赛数据。setLeague（）。控制台。日志调用输出新的联盟数据。但是，当调用next（）时，```这个。league``被重写为我在数据函数中指定的默认值（名称：“init”等）。我不知道为什么。

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

需要注意的一件有趣的事情是，。league=null触发观察者，而则触发此。setLeague没有。此外，在更新之前登录的输出不是vue观察者，而是普通联盟对象。我试着改变这个。setLeague调用此。league=league，这没有帮助。

Answer 1

我也有同样的问题，所以我创建了新的测试组件，并开始测试它。我发现创建（），挂载（），data（）钩子两次触发，这意味着路由器每次都重新创建组件，而不是缓存组件。然后我看了应用程序组件，并保存它的原因。我为每个路由分配了唯一的密钥，因此它将使用不同的组件实例，而不是每个路径的一个实例，如 /test/page/1和 /test/page/2.所以我把它取了下来现在一切正常

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

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

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