使用虚拟页面配合 vue-router 划分项目结构解决的问题
- 由于对 router 的理解问题，项目里之前使用了比较恶心的路由配置，导致项目路由嵌套关系特别混乱，而且带来了问题，同一个模块在切换子模块的时候左侧导航栏高亮消失。如下图:
vue 的 src 文件里组件文件的结构一般如下
（注：文件夹名采用小写，因为对应的是路径 path）
+-----------------------------------+
+ src
| + components | +------------> 存放基本组件
| | + block | +------------> 存放简单的模块，如某个列表
| | + toolkit | +------------> 存放可复用的组件，如面包屑，标题
| + views | +------------> 存放基本视图（由components里组件组成）
| + pages | +------------> 存放虚拟页面，各个模块的入口，尽量做到简单清晰
+-----------------------------------+
虚拟页面的和 vue-router 的配置
（注：组件名名采用大写，保持规范结构清晰）
我们现在开发一个模块叫应用管理（AppManage），这个应用管理又分为两个模块：
- 应用列表（AppList）
- 列表编辑 （AppEdit）
左侧导航栏只有一个应用管理的模块，需求并没有将导航拆分为列表和编辑。（逻辑上其实也不用，列表操作跳转编辑） 但是我们再划分 views 的时候认为这两块是同级别的，不存在嵌套关系，所以我们在 views 新建两个视图模块,在 pages 新建 AppManage 模块的入口，也就是虚拟页面
+-----------------------------------+
+ src
| + components |
| + views |
| | + AppList.vue | +------------> 应用列表视图
| | + AppEdit.vue | +------------> 应用编辑视图
| + pages |
| | + AppManage.vue | +------------> 应用管理模块虚拟页面
+-----------------------------------+
接下来我们在 AppManage 和 router 里分别配置：
AppManage.vue 的 template 代码如下：（简洁清晰，只有一个 router-view 命名视图）
<div class="app-manage">
<router-view name="content"></router-view>
</div>
对应的 router.js 的代码：
const router = new VueRouter({
routes: [
{
path: '/appmanage/',
component: AppManage
}
]
})
接着继续在 router 引入应用列表和应用编辑模块进行配置子路由：
const router = new VueRouter({
routes: [
{
path: '/appmanage/',
component: AppManage,
children: [
{
path: 'applist',
components: {
content: AppList
}
},
{
path: 'appedit',
components: {
content: AppEdit
}
}
]
}
]
})
这样对应的页面结构就如下：
/appmanage/applist /appmanage/appedit
+------------------+ +-----------------+
| AppManage | | AppManage |
| +--------------+ | | +-------------+ |
| | AppList | | +------------> | | AppEdit | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
这样一个比较清晰的页面结构就配置好了。 由于这个 AppManage 是虚拟页面，/appmanage/这个路径并不存在，所以需要最后需要在 router 里默认重定向跳转地址 redirect: '/appmanage/applist'
const router = new VueRouter({
routes: [
{
redirect: '/appmanage/applist'
path: '/appmanage/',
component: AppManage,
children: [
{
path: 'applist',
components: {
content: AppList
}
},
{
path: 'appedit',
components: {
content: AppEdit
}
}
]
}
]
})
总结:
开始写项目的时候，一定要把结构划分清晰，规范确定好，一个清晰的代码结构可以大大提升开发效率！！可以避免好多不必要的 bug。命名规法也一定要符合统一风格，比如文件夹都是小写，组件都是大写。将选择和认知的成本最小化。。。