Pass propsData in beforeRouteEnter's next callback and call it before mounting

[rhyek]

So, after reading #779, #714 and running some tests of my own, I understand that the order of execution when using beforeRouteEnter is:

1. beforeRouteEnter
2. next
3. All component's lifecycle hooks starting from beforeCreate down to mounted
4. next's callback (which usually sets data on the vm)

So, if you're trying to display a nested property on your data object, you need to initialize it, otherwise you'll get runtime errors (e.g., cannot read property of null).

Sometimes it may be a little complicated/tedious to initialize data when it's structure is expected to be deep/complex, but it's often necessary if you're directly accessing nested properties in your template or computed properties. This can of course also be avoided by having something like <span v-if="person">{{ person.name}}</span>, but it also makes your markup more verbose.

I feel like the way beforeRouteEnter should work, is after you run your async operations and have your data ready, you should be able to somehow pass propsData during the vm creation. This would feel more natural to me, since data is coming from outside and these components would be guaranteed their data is already there when it renders.

I'd love to be able to do something like this:

export default {
  props: {
    person: {
      type: Object,
      required: true
    }
  },
  beforeRouteEnter(to, from, next) {
    ...
    next({
      person: {
        name: 'Carlos'
      }
    });
  }
}

[rhyek]

A couple of thoughts:

• It could also be possible to pass a regular options object for further customization instead of just propsData.
• This doesn't need to be a breaking change (if implemented). next could check whether the argument is a function or not. If not, treat as options.

[naczu]

is there any progress ?

[posva]

No, right now the next callback waits for the next tick, that's why it's only called after the mounted hook

[psi-4ward]

@posva: The next callback gets called after mounted but if we pass an Object as argument there's no need to put it at the end of the event loop and could resolve the async loading problem:

beforeEnter(to, from, next) {
   axios.get().then(data => next({props: {data}));
}

BUT! We than we need also a beforeUpdate() to be able to react to $param changes

[psi-4ward]

Btw, this also works actually:

        props: function(to) {
          console.log('PROPS', to.meta.props);
          return to.meta.props;
        },
        beforeEnter(to, from, next) {
          console.log('before enter', to.meta);
          setTimeout(function() {
            to.meta.props = {
              id: to.params.id,
              test: "123"
            };
            next();
          },500);

[rhyek]

@psi-4ward: Very interesting! It would kind of make route definitions rather verbose going with this approach, though. I feel like the general preference is in-component guards for this sort of thing.

Kind of off-topic, but I like Ember's approach where the route class has a model (params) hook where you return a Promise and after that resolves the controller is instantiated. If you configure it so, changing query params tied to route segments will also trigger the hook.

Returning promises allows for much cleaner code, IMO. Something like this would be cool:

export default {
  async model (to) {
    const { data } = await axios.get(`/api/items/${ to.params.id }`)
    return { item: data }
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  }   

Edit: Any error raised inside model would be handled by router.onError.