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',
  ponent: 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 ?

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',
  ponent: 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 ?

• javascript
• vue.js
• vue-router
• mixins
• vue-mixin

• Can you show your mixin code? What dependencies does your loadProfile method have? – Phil Commented Jan 22, 2019 at 11:45
• 1 @Phil The loadProfile is super basic. It makes an axios GET request and then resolves with the data. It only depends on axios. – S. J. Commented Jan 24, 2019 at 16:43

2 Answers 2

The issue is that...

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

Vue-router is not a ponent, nor do you have access to the ponent 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(...)

Maybe you can try do it on beforeRouteEnter inside Profile ponent. So there you can grab meta title and set title of page and there you will have access to mixin methods:

beforeRouteEnter (to, from, next) {
  if (to.meta && to.meta.title) {
    to.meta.title(router.app, to, (result) => { document.title += ' | ' + result; });
  }
},

Docs: https://router.vuejs/guide/advanced/navigation-guards.html#in-ponent-guards