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

Posted 2023-02-16

【中文标题】Vue.js：在 vue.router 路由中使用 mixin 函数

【英文标题】：Vue.js: Using mixin functions inside vue.router routes

【发布时间】：2019-06-15 04:59:48

【问题描述】：

我想为每条路由动态设置窗口的标题，所以在每个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 添加到路由器的mixin 中，但loadProfile 不可用（this.loadProfile 未定义）。我在全局范围内加载了GetAndStore 并再次尝试了相同的结果。在过去的一个小时里，我已经尝试了所有我能想到的配置，但我根本没有找到任何方法可以在此设置中访问来自 GetAndStore 的方法。

关于我缺少什么或者我需要重组什么以便从 routes->element->meta->title 中访问 mixin 方法的任何想法？

【问题讨论】：

你能展示你的mixin代码吗？你的loadProfile 方法有什么依赖关系？

@Phil loadProfile 是超级基本的。它发出axios GET 请求，然后用数据解析。它只依赖于axios。

【参考方案1】：

问题是……

Mixins 是一种为 Vue 组件

分配可重用功能的灵活方式

Vue-router 不是组件，你也无权访问为路由加载的组件。

我建议将 loadProfile 从您的 GetAndStore mixin 中命名为导出。假设你的 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(...)

【讨论】：

我将其标记为“正确”，因为它与我得出的相同结论，以及我最终使用的相同实现。

【参考方案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

【讨论】：

我想这是有可能的，因为组件可以访问 mixins（而 vue 路由器显然没有），但我喜欢所有面向路由的细节都包含在路由器文件中的想法，并且没有这里的一些部分，那里的一些，等等。