javascriptvue.jsvue-routermixinsvue-mixin

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


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 ?


Solution

  • 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(...)