一个后端童鞋步入 vue 深渊引发的惨案： VSCode Vue开发目录下多个路由访问重叠不生效问题解决

文章目录

一、再现

有时候前端为了维护某个模块【如下文的系统管理】，习惯上会将开发的代码都维护在该目录下，无论从业务和开发理解角度都是没错的，无奈vue 的设计理念会对这样的设计思想产生冲击，注意我说的是冲击，并非是破坏或者说不易用；来看一个明显的效果：

在这里插入图片描述

不知道，有多少童鞋平时使用 vue开发的时候是这样的风格，至少从笔者后端出身的设计中就曾有这样的习惯（有的时候公司内部组件需要界面展示，fe 可是不 care，这个时候就得自己来了）；总觉得没毛病，但路由解析的时候界面死活重叠在一个路由下，无法自动跳转到你的角色、用户的各个页面，比如总是停留在角色界面，哪怕你的路由和组件路径都是正确的.

二、破局

那么针对上面的问题该如何解决？

界面目录：前端展示的目录结果
开发目录： vcode 等编辑器开发的代码目录

事实上，上面提到的场景只是一种开发习惯，需要明确3种开发习惯才可以避免以上问题：

界面目录只有一级父目录和二级菜单，不同的父目录下的子菜单，维护各自下的所有页面。开发目录也对应该关系，创建各自的开发目录，并将页面文件都放在该目录下。
界面目录有多层级，开发目录对应该关系，也创建多个层级。【解决繁琐】
界面目录和 1 相同，但是开发目录创建多个层级，目的是更细粒度划分各个路由或者说模块的关系。
网友：你以为我会只有这三种情况开发嘛？我还能在整一种!【TL：如果你说的不是混合使用，那希望 vue 能送走你☺️】

由此解决方式便出来了

入乡随俗

按 vue 官网给的 demo开发习惯是：一个页面对应一个目录【注意前提是父目录只能是 views根目录，有过开发经验同学都知道，如api、route、views、state这些目录都是根目录】。

即便该菜单有多个页面，也需要创建多个目录，比如系统管理下有用户管理、角色管理、权限管理，那么你开发目录结构是：views/user 、views/role、 views/menu这样一定不会出现此类问题。与此带来的问题是维护不便

横刀立马

依托你的思路，即你为了维护方便，必然期待上面需求是：views/sys/user、 views/sys/role 、 views/sys/menu, 这样符合开发习惯，若使用这样的思路，那么页面目录不能按照创建的开发目录那样分级，否则会出现 3 个页面访问都是同一个页面的情况【即便 url 上看是不同的】，所以界面目录应该是：
在这里插入图片描述
而不再是开局提到那样具有多层目录关系。必须如此创建页面结构嘛？
若真如开篇提到那种方式创建，只不过需要在每个二级开发目录sys/role sys/menu 目录下
都需要一个添加重新渲染的代码文件【命名保持和创建路由的路径一致即可】，仍可以解决该问题

<template>
  <router-view />
</template>

三、开局

vue 开发目前经过这几篇讲述，笔者自认为算是打开了 vue 开发的大门；现如今也算是在前端开辟一条道路，为日后的类似界面开发工作也提供了便捷;

此外曾经一直着力于开发的后端的我在自己写 vue过程，才深刻明白平时和前端接口交互的时候遇到一些矛盾，恰恰是自己不专业导致的，有时候换位思考才真正明白当时前端为啥那么想骂我。（向过去被我折磨的前端大佬致歉）

往期回顾