Vue.js: использование функций mixin внутри маршрутов vue.router

Question

Я хочу динамически установить заголовок окна для каждого маршрута, поэтому в каждом routes: [] дочернем объекте у меня есть meta: { title: ... } объект.Например:

routes: [
{
  path: 'profile/:id',
  name: 'Profile',
  component: Profile,
  meta: {
    title: function (to, cb) {
      const profileId = parseInt(to.params.id);
      // ... do stuff ...
    }
  }
}
]

Я вызываю эту функцию заголовка в хуке afterEach:

router.afterEach((to) => {
    document.title = 'My Site';
    if (to.meta && to.meta.title) {
        to.meta.title(router.app, to, (result) => { document.title += ' | ' + result; });
    }
});

В части ... do stuff ... я хочу вызвать метод из моего mixin GetAndStore.js называется loadProfile(profileId).Я добавил GetAndStore в миксины маршрутизатора, но loadProfile недоступен (this.loadProfile не определено).Я загрузил GetAndStore глобально и попытался снова с теми же результатами.Я пробовал каждую конфигурацию, о которой я могу думать в течение последнего часа, я не нашел никакого способа получить доступ к методам из GetAndStore из этой настройки.

Любые идеи о том, что мне не хватаетили что мне нужно реструктурировать для доступа к методам mixin из routes->element->meta->title?

Answer 1

Проблема в том, что ...

Миксины представляют собой гибкий способ распространения многократно используемых функций для компонентов Vue

Vue-routerне компонент, и у вас нет доступа к компоненту, загруженному для маршрута.

Я бы предложил сделать loadProfile именованным экспортом из вашего GetAndStore mixin.Предполагая, что ваш миксин экспортируется как

import axios from 'axios' // just an example

export default {
  methods: {
    loadProfile (profileId) {
      return axios.get(...)
    }
  }
}

, вы можете переместить свою функцию из экспорта по умолчанию и присвоить ей имя ...

export function loadProfile (profileId) {
  return axios.get(...)
}

export default {
  methods: {
    loadProfile
  }
}

, тогда вы можете импортировать только функцию loadProfileв определениях вашего маршрута ...

import { loadProfile } from 'GetAndStore'

---

Конечно, вы также можете импортировать ваш миксин как есть и просто использовать

import GetAndStore from 'GetAndStore'

// snip

GetAndStore.methods.loadProfile(to.params.id).then(...)

Answer 2

Может быть, вы можете попробовать сделать это до beforeRouteEnter внутри компонента Profile. Таким образом, вы можете получить мета-заголовок и задать заголовок страницы, и там у вас будет доступ к методам mixin:

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

Документы: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards