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

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

Related