web-dev-qa-db-ja.com

Vue.js：vue.routerルート内でのミックスイン関数の使用

ルートごとにウィンドウのタイトルを動的に設定したいので、各_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 ..._の部分で、ミックスイン_GetAndStore.js_からloadProfile(profileId)というメソッドを呼び出したいと思います。ルーターのミックスインにGetAndStoreを追加しましたが、loadProfileは使用できません（_this.loadProfile_は未定義です）。 GetAndStoreをグローバルにロードし、同じ結果で再試行しました。過去1時間に考えられるすべての構成を試しましたが、このセットアップ内からGetAndStoreからメソッドにアクセスする方法がまったく見つかりませんでした。

_routes->element->meta->title_内からミックスインメソッドにアクセスするために、不足しているものや再構築する必要があるものについてのアイデアはありますか？

javascriptvue.jsvue-routermixinsvue-mixin
6
S. J.

たぶん、プロファイルコンポーネント内のbeforeRouteEnterでそれを試すことができます。したがって、メタタイトルを取得してページのタイトルを設定すると、ミックスインメソッドにアクセスできるようになります。

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

0
Bond77