CODEWITHSUNDEEP
vue.jsvuejs2vue-router
raxell
raxell

Reputation: 677

Vue router view event propagation

I cant't figure out why the router-view does not emit the "login" event.
Here's the fiddle I'm playing with: https://jsfiddle.net/cvtwxf6h/22/

I want 2 different layouts, one for logged user and another for not logged user. The layout to display is determined by the logged property of the Index component.
When I click "Login" in the login page, a "login" event should propagate up to the Index component to update the logged property and change layout. For some reason the router-view does not emit the event, what am I doing wrong?

(I just want to understand the problem, I'm not interested in alternative ways to achieve this)

Upvotes: 0

Views: 1015

Answers (1)

tony19
tony19

Reputation: 138196

The problem seems to be the router-link navigates to a different route (via to="{name: 'index'}") before the login event is emitted, which causes the event to be lost somehow. If the target route is the same as the current route (no navigation), the event reaches the parent component without a problem.

A workaround would be to imperatively navigate with $router.push() after emitting the event:

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

Upvotes: 1

Related Questions