Question

我不知道为什么路由器视图不发出“登录”事件。
这是我正在玩的小提琴：https://jsfiddle.net/cvtwxf6h/22/

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

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

Answer 1

问题似乎是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

Vue路由器视图事件传播

1 个答案: