vue 初学者路由结构梳理

一、问题

对于刚用 vue 框架写这种项目的新手来说会弄不清项目结构要怎么弄才能让路由条理足够清晰。因为最近碰到有人问我这个问题，便整理一下，希望能帮到刚接触的人。有过大型网站项目经验的人请忽略此文。

二、项目结构：

1、网站

下面以思维导图的形式展现目录结构

网站结构

2、结构说明及需求

网站结构如图所示，下面会举例说明

注意：B 中的 a 和 C 中的 a 不是同一个页面

• 网站包含A、B、C、D 四个模块
• 其中 A 模块没有子模块，类似网站首页，没有二级页面
• B 模块有 a、b、c、d 四个子模块，其中默认显示 B 下的 a 模块
  • a 模块存在 b、c、d 三个模块的入口，但 b、c、d 没有互相跳转的入口（导航栏的二级下拉框中没有 a 的入口，因为点击 B 本身就显示的是 a 模块）

可以把 B 想象成多功能模块，如 B 为「音乐排行榜」，默认显示 a，a 包含 b（新声榜）、c（说唱榜）、d（古典音乐榜）等等。不清楚可见如下网易月音乐的《全球榜》

音乐榜单

• C 模块有 a、b、c 三个模块，点击 C 默认显示 a 模块，a、b、c 可互相跳转，且页面都有各自入口（C 没有二级下拉菜单）

可以把 C 想成登录成功后的「个人中心」，a（个人资料）、b（密码管理）、c（我的收藏）等

• D 模块可以跳转到 C 模块

C 模块若为「个人中心」，那么 D 模块就是「登录」模块，所以 C 和 D 只显示一个，未登录显示 D，登录成功后显示 C

三、代码项目结构

项目结构以思维导图为例，项目结构如图所示：

项目结构

四、路由配置

路由配置以思维导图为例，配置如图所示：

路由配置

五、注意事项

上面的代码结构和路由配置中都有入口文件 index.vue，其中主要区别在 B 模块和 C 模块的 index.vue 中。

B 模块的 index.vue 是一个空的入口文件，C 模块的 index.vue（充当了 B 模块中 a 模块的角色） 是带有 a、b、c 模块的路由入口

很多时候，对于 B 模块中的 a 模块，因为存在去往 b、c、d 模块的入口，会误以为 a 模块和 b、c、d 模块是父子路由的关系，其实不是，这里他们是平级路由跳转关系。