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路由器实例，所以我必须在另一个模块中导入routes.js =＆gt;循环导入。

所以，我听说过$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：需要导入，但如何避免循环依赖？

1 个答案: