写代码时遇到的奇葩事

版本说明

"vue": "^2.6.11",
"vue-router": "^3.1.6",

傻缺事

在开发过程中，需要增加一个页面，通过路由访问。配置好后，拿着刚配置的路由去访问，访问到的确是一张空白页。

怎么回事呢？

• 首先检查了路由配置

{
    path: '/train/groupList',
    name: '培训小组',
    component: () =>
        import ('@/views/group/groupList'),
    meta: {},
},

格式路径都配置正确

• 难道是页面内容格式不正确吗？ module/group/index.js

<template>
    <div>
        培训列表
    </div>    
</template>

<script>
export default {
    name: "GroupList",
}
</script>

格式什么的，有问题呀 后面怎么倒腾也没发现到底是怎么回事，过了好久好久突然发现，是路由配置文件出现了问题

• 路由配置目录结构

- router
    |____ module
         |____group
              |____index.js
         |____...
         |____index.js
         |____group.js
    |____index.js

其中 router/index.js

import groupRoutes from "./module";

而 router/module/index.js

import group from "./group";
export [
    ...group,
]

找到问题原因了... 比较傻缺 ...

我是在module/group/index.js 中添加的路由 /group/groupList，而在 router/module/index.js文件中，import group from "./group"，访问到的是 module/group.js 而非 module/group/index.js。

问题所在

在router/module下有同名的文件group.js和目录名group/index.js，此情况下，会优先访问 group.js ，如果该文件不存在，则会去访问group/index.js，是访问路径的顺序问题。

haha...