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 exampleexport 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'// snipGetAndStore.methods.loadProfile(to.params.id).then(...)
Maybe you can try do it on beforeRouteEnter inside Profile component. 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.org/guide/advanced/navigation-guards.html#in-component-guards