CODEWITHSUNDEEP
javascriptvue.jsvue-router
a--m
a--m

Reputation: 4782

Vue router update parent component on closing nested routes

I've the following use-case:

  1. Visit /parent page and Parent component is rendered
  2. Visit /parent/john and the Child component is rendered
  3. Navigate back to /parent the child component is destroyed

At this point I need to update the Parent component. I've the following routes.js:

{
  path: '/parent',
  name: 'parent',
  component: Parent,
  beforeEnter: (to, from, next) => {
    console.log(to, from);
    next();
  },
  children: [
    {
      path: ':child',
      component: Child
    },
  ]
},

Since beforeEnter the first time the component is rendered is there any other way to know that the route was updated and trigger a method on the Parent component?

Upvotes: 1

Views: 2134

Answers (1)

lmarqs
lmarqs

Reputation: 1471

I think reacting-to-params-changes may be helpful.

Basically, after registering vue-router all components will have the '$router' and '$route' attributes.

component.$router can be used to bind listeners and change the current route programatically.

component.$route holds the information about the current route.

So, one alternative is watch the '$route' attribute.

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

Upvotes: 2

Related Questions