Vue.js: Using mixin functions inside vue.router routes

Question

I want to dynamically set the title of the window for each route, so in each routes: [] child object I have a meta: { title: ... } object. For example:

routes: [
{
  path: 'profile/:id',
  name: 'Profile',
  component: Profile,
  meta: {
    title: function (to, cb) {
      const profileId = parseInt(to.params.id);
      // ... do stuff ...
    }
  }
}
]

I call this title function in an afterEach hook:

router.afterEach((to) => {
    document.title = 'My Site';
    if (to.meta && to.meta.title) {
        to.meta.title(router.app, to, (result) => { document.title += ' | ' + result; });
    }
});

In the ... do stuff ... portion I want to call a method from my mixin GetAndStore.js called loadProfile(profileId). I added GetAndStore into the router's mixins, but loadProfile is not available (this.loadProfile is undefined). I loaded GetAndStore globally and tried again with the same results. I've tried every configuration I can think of for the past hour I've not found any way at all to access the methods from GetAndStore from within this setup.

Any ideas of what I'm missing or what I'd need to restructure in order to access mixin methods from within routes->element->meta->title ?

Answer 1

The issue is that...

Mixins are a flexible way to distribute reusable functionalities for Vue components

Vue-router is not a component, nor do you have access to the component loaded for the route.

What I would suggest is making loadProfile a named export from your GetAndStore mixin. Assuming your mixin is exported like

import axios from 'axios' // just an example

export default {
  methods: {
    loadProfile (profileId) {
      return axios.get(...)
    }
  }
}

you can move your function out of the default export and name it...

export function loadProfile (profileId) {
  return axios.get(...)
}

export default {
  methods: {
    loadProfile
  }
}

then you can import just the loadProfile function in your route definitions...

import { loadProfile } from 'GetAndStore'

---

Of course, you could also import your mixin as it is and just use

import GetAndStore from 'GetAndStore'

// snip

GetAndStore.methods.loadProfile(to.params.id).then(...)