beforeRouterEnter Vue 数据未在标头组件中更新答案

【问题标题】：beforeRouterEnter Vue data not updated in header componentbeforeRouterEnter Vue 数据未在标头组件中更新
【发布时间】：2021-10-05 09:15:17
【问题描述】：

我想在 VueJs 2 中输入路由之前更新数据。这是我在组件中尝试的：

  data: function () {
    return {
      name: "test"
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
        vm.name = "done";
      });
  },

但是当我显示名称数据时，“测试”显示并没有完成。我如何使用 Header 管理这个？

【问题讨论】：

您可以在组件的挂载函数中使用“存储”并设置存储中的数据。
请为您的问题提供stackoverflow.com/help/mcve。如果您已经在这条路线上，您所描述的将会发生，在这种情况下，您将需要路线更新挂钩。

标签： vue.js vue-router

【解决方案1】：

~~你没有看到值改变的原因是它被'test'覆盖了。~~

如果您想在渲染之前更改组件上的变量，可以使用beforeCreate。

beforeRouterEnter 用于做出路由决策（例如，停留或重定向）。

【讨论】：

它被 'test' 覆盖了 - 这不是真的，下一个 callack 会在之后执行
@EstusFlask 是的，在您发表评论后，我已经仔细检查了它并且确实如此。自己检查一下如果我错了，我会很高兴知道的。
是的，我确信它按我说的方式工作。 data 是组件生命周期中第一个触发的函数。如果不调用它，您实际上无法获得vm 实例。我处理的 Vue 路由器的问题之一是它无法进入组件生命周期并设置初始数据。第一次渲染发生在使用组件本身提供的数据的挂载上，然后调用next 回调并可以为vm 上的下一次渲染分配数据。 name 保持“测试”的唯一可能性是 beforeRouterEnter 没有被触发，如果你已经在这条路线上自然会发生这种情况。
即vm => ... 在路由进入时在 mounted 之后调用，或者在路由更新时根本不调用。
我做了一个 jsfiddle 给你看，你错了。结果你是对的！哈哈！感谢分享！我更新了答案。