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 ...部分中，我想从我的混合GetAndStore.js中调用一个名为loadProfile(profileId)的方法。我已将GetAndStore添加到路由器的mixins中，但是loadProfile不可用（this.loadProfile未定义）。我全局加载了GetAndStore，然后再次尝试了相同的结果。在过去的一个小时中，我已经尝试过所有可以想到的配置，但在此设置中，找不到从GetAndStore访问方法的任何方法。

要想从routes->element->meta->title内部访问mixin方法的任何想法或需要重组的东西？

Answer 1

问题是...

Mixin是分配 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'

当然，您也可以按原样导入mixin并直接使用

import GetAndStore from 'GetAndStore'

// snip

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

Answer 2

也许您可以尝试在Profile组件内部的beforeRouteEnter上进行操作。因此，您可以在其中获取元标题并设置页面标题，然后就可以使用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

Vue.js：在vue.router路由内使用mixin函数

2 个答案: