how to handle route changing with composition API?

[gregveres]

This is similar to #49, but that seemed to focus a lot on beforeRouteEnter.

How are we supposed to deal with route changes? For instance. I have a route that uses a query parameter that controls an API query. When the user selects a new value from a drop down, I send a new request to the API and I push a new element on the router's stack. This all works great. The router stack updates.

But then when the user presses the back button, to go to the previous value of the query parameter, I can override beforeRouteUpdate and see that the route has changed, but then how do I get that value into a view model class ( a use* function) that was created in my setup routine?

If I create an instance of a view model class (where all the component logic really lives) in the setup, is the expectation to keep a copy of that in the component by returning the object?

Right now I do the following:

  setup(prop, { root }) {
    const playerModel = new RankedPlayerViewModel(root.$router);

   return { playerModel .ref1, playerModel .ref2 };
  },

Given this, I see no way to call a function on vm from the beforeRouteUpdate function because it only lives in the context within Setup.

Were you expecting people to instead do something like this:

  setup(prop, { root }) {
    const playerModel = new RankedPlayerViewModel(root.$router);

   return { playerModel };
  },

and then in the template reference everything as 'playerModel .ref1' rather than just ref1?
I think that if i do that, then in the beforeRouteUpdate, I can somehow get to the $vm of the component to reference playerModel from there.

If there is a better way to do this, then I think the docs need to be updated. I don't see anything in the docs that talks about the router. Sorry if it is there and I missed it.

[posva]

You can return a function inside setup to call in it beforeRouteUpdate. For Vue 3, there will probably be something like onBeforeRouteUpdate that can be directly used inside setup

[noook]

@posva How do you call it ? I tried this way but the function is undefined:

export default defineComponent({
  name: 'Tenders',
  components: {
    TenderItem,
    SortingArrows,
  },
  beforeRouteUpdate(to, from, next) {
    console.log(this.onRouteUpdate); // undefined
    this.onRouteUpdate(); // error
    next();

    /* Also tried this:
    next(vm => console.log(vm)); Nothing shows up in console
	*/
  },
  setup(props, { root }) {
	/* ... */
    function onRouteUpdate() {
      if (root.$route.name === 'tenders') loadData(currentPage.value);
    }

    return {
      onRouteUpdate,
    };
  },
});

[noook]

Ok I found out the reason after some research on onr of your slides here

Callback is ignored.

So this works perfectly for my use case:

beforeRouteEnter(to, from, next) {
  next((vm) => {
    vm.onRouteUpdate();
  });
}