Vue 路由视图事件传播

Vue router view event propagation

我不明白为什么路由器视图不发出 "login" 事件。
这是我正在玩的 fiddle：https://jsfiddle.net/cvtwxf6h/22/

我想要两种不同的布局，一种用于已登录用户，另一种用于未登录用户。要显示的布局由 Index 组件的 logged 属性 决定。
当我在登录页面中单击 "Login" 时，"login" 事件应该传播到索引组件以更新 logged 属性 并更改布局。由于某种原因，路由器视图没有发出事件，我做错了什么？

（我只是想了解问题，我对实现此目标的其他方法不感兴趣）

问题似乎是 router-link 导航到另一条路线（通过 to="{name: 'index'}"）在 发出 login 事件之前，这导致事件以某种方式丢失。如果目标路由与当前路由相同（无导航），则事件到达父组件没有问题。

解决方法是在发出事件后使用$router.push()强制导航：

const LoginPage = {
  template: `<router-link to="" @click.native="switchToLoggedPage({ name: 'index' })">Login</router-link>`,
  methods: {
    switchToLoggedPage(route) {
      this.$emit('login');
      this.$router.push(route);
    },
  },
};

demo