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

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