Vue router view распространение событий

Question

Я не могу понять, почему вид маршрутизатора не генерирует событие "login".
Вот скрипка, с которой я играю: https://jsfiddle.net/cvtwxf6h/22/

Я хочу 2различные макеты, один для зарегистрированного пользователя и другой для не зарегистрированного пользователя.Отображаемый макет определяется свойством logged компонента Index.
Когда я нажимаю «Логин» на странице входа в систему, событие «login» должно распространяться до компонента Index, чтобы обновить свойство 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);
    },
  },
};

демо