Vuerouter : 需要导入，但是如何避免循环依赖？

Question

我试图找到解决循环依赖问题的方法。在我的 Vuejs 应用程序中，我想要一个函数 makeUrl(url)，它通过在开头添加 $router.base 值来计算给定参数的绝对值 url。

所以我把它放在我的模块中 routes.js :

const router = new VueRouter({
    base: '/subdirectory',
    //...
});

function makeUrl(url){
    return router.base + url;
}

export {makeUrl};
export default router;

routes.js 被导入 main.js，我的应用程序的入口点，我在其中创建我的 Vue 主实例。

在 routes.js 中，我导入我的页面组件，这会导入所有其他组件。在其中一些中，我需要使用我定义的 makeUrl() 函数。但是我无法导入 routes.js 因为它会创建循环导入。

我无法在另一个模块中移动我的 makeUrl() 函数，因为我需要访问 Vue-router 实例，所以我必须在另一个模块中导入 routes.js => 循环再次导入。

所以，我听说了 $router 变量，所以我尝试构建一个包含 makeUrl() 函数的实用程序组件：

//util-component.js
'use strict';

import Vue from 'vue/dist/vue';

const UtilComponent = Vue.component('util-component', {
  methods: {
      makeUrl(url){
          return this.$router.base + url;
      }
  }
});

export default UtilComponent;

在我的个人组件中：

//my-component.vue
<template>
    <img class="logo" :src="util.makeUrl('/assets/img/logo-transp.svg')" alt=""/>        
</template>

<script>

import util from 'utils/util-component';

export default {
  data () { return {};}
}
</script>

但是它以相同的结尾 TypeError: e.makeUrl is not a function... :(

我该如何处理？感谢您的帮助！

Answer 1

对于实用函数，您应该使用 mixin 代替：

// mixins/Utils.js
export default {
  methods: {
    makeUrl(url) {
      return this.$router.options.base + url;
    }
  }
}

您可以像这样将 mixin 添加到您的组件中：

<script>
import Utils from 'mixins/Utils';

export default {
  mixins: [ Utils ],
}
</script>

现在，您的组件有一个 makeUrl 方法，该方法将在其范围内调用，这意味着它对 this.$router 的引用将是您想要的 VueRouter 实例。

您可以像使用任何其他组件方法一样在模板中使用此方法：

<template>
  <img class="logo" :src="makeUrl('/assets/img/logo-transp.svg')" alt=""/>        
</template>

Vuerouter : 需要导入，但是如何避免循环依赖？

Vuerouter : need to import, but how to avoid circular dependency?

circular-dependency

vue.js

vue-router