Vue 组件默认数据值覆盖了我在 beforeRouteUpdate 中设置的值答案

【问题标题】：Vue Component default data value overrides what I set in beforeRouteUpdateVue 组件默认数据值覆盖了我在 beforeRouteUpdate 中设置的值
【发布时间】：2020-08-03 03:20:45
【问题描述】：

我使用 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 保护被触发。在那里，获取其余数据并通过 this.setLeague() 设置联赛数据。 console.log 调用输出新的联赛数据。然而，当调用 next() 时，````this.league``` 被覆盖为我在数据函数中指定的 default 值（名称：'init' 等）。我不知道为什么。

我基本上直接从 vue docs here 改编了这段代码。

需要注意的一个有趣的事情是this.league = null 会触发观察者，而this.setLeague 不会。此外，在 beforeUpdateRoute 中登录的输出不是 vue 观察者，而是普通的联盟对象。我尝试将this.setLeague 调用更改为this.league = league，但没有帮助。

【问题讨论】：

从 /leagues/1 到 /leagues/1 的变化是什么意思
这个问题你解决了吗？我现在也一样（

标签： javascript vue.js vue-router

【解决方案1】：

我遇到了同样的问题，所以我创建了新的测试组件，并开始测试它。我发现created()、mounted()、data() 钩子触发了两次，这意味着路由器每次都重新创建它而不是缓存组件。然后我查看了App组件，并保存了它的原因。我为每条路由分配了唯一键，因此它将使用不同的组件实例，而不是为每个路径使用一个，例如 /test/page/1 和 /test/page/2。所以我已经删除了它，现在一切都按预期工作了

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

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

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

【讨论】：