[Vuejs]-Vue router does not reinitialize child components

by

2👍

✅

Watch the router from any of the parent component. 

watch:{
  `$route`:function(route){
     if(route.name === 'users.create'){
       this.fetchData(route.params.id);
     }
   }
},
methods:{
   fetchData:function(id){
     // fetch your data corresponding to the id
     // save the response to store using `commit`.
     // this.$store.commit('SET_FIELDS',response.data.data.fields);
   }
}

Then initialise a mutation and state in the store

const state = {
  fields:{}
}

const mutations = {
  SET_FIELDS:(state,value)=>state.fields = value;
}

Inside the ResourceForm component, you can get the data from store using computed method.

computed:{
  fields:function(){
    return this.$store.state.fields;
  }
}

The fields value will rendered real-time on changing the route.

👤Rijosh

1👍

I think you can put the user in a vuex state and use this state in both component. Or maybe launch the request in beforeEnter hook

👤Adri HM

1👍

What you need is In Component Guards since these guard methods are available in the components because you passed an imported view directly to vue-router:

    {
        path: '/admin/users',
        name: 'users.index',
        component: Index // <-- makes Component Guards available in './views/Index.vue'
    },

Replace:

created() {
  this.fetchResourceForm();
}

with:


  // Fires if you are already on a DYNAMIC route when a uri parameter like :id changes
  // This will for example run if you navigate from `/admin/users/123` to `/admin/users/456`
  beforeRouteUpdate(to, from, next) {
    this.fetchResourceForm();
    next()
  },

  // Fires if you switch between different router entries.
  // When you navigate from `/something` to `/another-path
  beforeRouteEnter(to, from, next) {
    this.fetchResourceForm();
    next()
  },

However, if you are fetching data inside a component that is inside a Router View then a watch will be required as others have suggested but why not just pass the data down as a prop instead?

👤Marc

0👍

I found the problem.
It does not relate to this functionality but to the component which generates the api routes.
@Rijosh’s solution works if someone encounter this problem in vue-router.

👤bambamboole

Leave a comment