Vue模块导入顺序错误

如何解决Vue模块导入顺序错误

也许这不是我遇到的特定于Vue的问题，但这是在我的VueJs项目中发生的。我试图简化问题，因此示例项目结构如下：

+-src/
  |
  +-config/
  | |
  | +-permissions.js
  |
  +-services/
  | |
  | +-auth.service.js
  |
  +-router.js
  +-main.js

我忽略了所有不重要的代码来保持简单，因此main.js是：

import router from "./router"
import authService from "./services/auth.service"

router.js

import * as Permissions from "./config/permissions"
export default new VueRouter({
  routes: [
    {
      Meta: { requiresPermissions: Permissions.ShowArticles,},// more unimportant lines here...
    },]
})
console.log('Loaded router.js')

permissions.js

export const ShowArticles = 'SHOW_ARTICLES'
console.log('Loaded permissions.js')

auth.service.js

import router from "./router"
console.log('Loaded auth.service.js')
console.log(router.currentRoute.Meta.requiresPermissions)

好，就这些。现在是我的问题。有4个console.log()，输出如下：

Expected output:
Loaded permission.js
Loaded router.js
Loaded auth.service.js
SHOW_ARTICLES

Actual output:
Loaded router.js
Loaded auth.service.js
undefined
Loaded permission.js

我从Vue组件加载了auth.service模块，但是在 router.js 和ShowArticles之后又加载了 permissions.js 变量具有 undefined 值。我不知道为什么会这样，将权限导入到路由器模块的顶部，那么为什么以后再调用呢？

希望很清楚。还有另一点：当我从auth.service中删除路由器时，输出变为：

Loaded auth.service.js
Loaded permission.js
Loaded router.js