系列文章目录
系列文章第一章：
vue3+electron开发桌面软件入门与实战（0）——创建electron应用
前言
上篇文章介绍了基于router插件，view ui的路由实现。
本篇文章在上文的基础上，借助router.js中配置的参数，实现首页快捷导航。通过对router的改造，进一步理解路由的用法。
一、场景
系统中，除了左侧的路由列表，我们可能还需要在首页实现快捷导航，能够将我们常用的页面路由渲染在首页，方便用户快捷地打开需要的页面。
基于前端快捷导航的实现，再配合缓存或者数据库，就可以实现用户的行为检测，为不同的用户提供不同的快捷导航，从而提升用户体验。
二、设计思路
1.快捷导航从何而来
快捷导航不论做成什么样式，从本质上来讲，也不过是和侧边栏一样的一个路由链接，它就相当于是全路由的一个子集。所以快捷导航的数据，应由路由文件而来。
2.路由文件的优化
既然快捷导航由路由文件而来，那么我们首先要做的就是，在路由文件的各个路由节点上，区分出哪个可以作为快捷导航，哪个不做处理。
所以我们增加属性参数：isHomeList。以路由文件中的某个对象为例：
{
path: '/gitTool',
name: 'gitTool',
component: Layout,
meta: {
// hideInMenu: true
},
children: [
{
path: '/gitTool_page',
name: 'gitTool_page',
meta: {
title: "git工具",
icon:'md-hammer',
// iconFont:'#icon-weixin', //如果是阿里图标，使用这个参数
isHomeList:true //不要用is开头命名
},
component: () => import('@/views/GitTool/GitTool.vue')
}
]
},
按照规范，布尔类型参数是不能以is开头，这主要是为了照顾后端某些自动序列化，有些规范可以任性，但是这个规范如果不注意，在和后端合作写路由管理的时候，会出现bug或者增加工作量。我这里写个反例，以作提醒。
同时我也建议，想把前端做好，对后端的技术要求是，起码能用后端框架写业务代码，达到后端码农的水平。专精前端，熟悉后端，才能做一个能无碍沟通，解决问题的T型人才。
3.首页快捷导航渲染
首页拿到路由数据，然后根据isHomeList属性筛选。
const homeList=ref([])
function getHomeList(list){
return list.filter((v,i)=>{
if(v.meta.isHomeList){
return v
}
})
}
onMounted(()=>{
homeList.value=getHomeList(router.getRoutes())
})
- router.getRoutes()：获取路由数据
- getHomeList:从路由数据里筛选出isHomeList为true的数据
4.配合后端实现路由管理
一般的管理系统都会包含路由管理模块，所以路由数据并不会直接定义在前端。而是通过：管理模块维护数据——>后端保存数据——>首页获取路由数据。
5.渲染快捷导航
前端渲染逻辑：
<Row>
<Col v-for="item in homeList">
<Card style="width:120px;margin: 8px" @click="turntoPage(item.name)">
<div style="text-align:center">
<svg v-if="item.meta.iconFont" class="icon" aria-hidden="true">
<use v-bind:xlink:href="item.meta.iconFont"></use>
</svg>
<Icon v-else :type="item.meta.icon" />
<h3>{
{
item.meta.title }}</h3>
</div>
</Card>
</Col>
</Row>
拿到上面的homeList数据后，把需要的属性渲染到页面上即可。
最终效果如图：
这就简单地实现了由路由属性控制快捷导航。以后不论是想要根据用户操作习惯来优化首页导航，还是配合后端利用路由管理设置首页导航，都可以通过操作isHomeList属性来实现。
总结
如果理解了上篇文章中基于router实现导航栏，那么本文只能算是个小demo，旨在打开思路——只要设计合理，router.js中的对象属性是可以随心所欲操作的。
其实不论是导航栏的渲染，还是首页快捷导航的渲染，都蕴藏了一个前端很重要的思路——渲染逻辑和业务逻辑解耦。
渲染逻辑，就是我拿到数据后，如何把数据渲染成页面。业务逻辑，则是在产生数据。为什么siHomeList一个小小属性，能够支撑后面各种拓展？
就是因为我整个页面的渲染，都是基于isHomeList来实现的，这就保证了我页面输入是唯一的、固定的。以后不论你想做任何业务，只要你通过自己的业务逻辑，合理去维护isHomeList，那么就可以支撑自己的业务。
以小见大，整个router.js都是这种思想的体现。我和路由相关的所有操作，不管你是做导航栏、首页快捷导航、历史导航记录、页面打开次数统计等等操作，都是通过router.js中暴露的对象实现的。最终就会形成一个大致分层结构：业务层（controller）——router对象层——页面层（view）。
业务层专注于如何形成科学的router对象，页面层专注于如何把router对象更健壮地渲染。
正是基于这种分层思想，我们才可以很容易地拓展一个快捷导航功能。不过总结里介绍的这种思维，是给只差临门一脚的同学准备的，如果你想更优雅地写好前端代码，又总是迫切地站在一个大门前，不得而入。那么我希望上面这几句话能对你有一些启发。
但是总会有人会不认同这种思维，觉得分层影响了自己关注点，造成关注点分离，从而影响代码可读性，那也无伤大雅。上面只是一家之言，一定不能适用于所有场景，甚至也有可能毫无合理性可言。
一年后的我重新审视现在的自己，大概率是觉得幼稚的。
惟愿诸君，求同存异，共同进步。