vuex+elemnt-plus+vue-router 实现tabs栏存储已访问路由

1.思路

（1）使用vuex存储当前激活的路由activeTabsPath以及存储已访问的路由showTabs，

（2）使用element-plus的tabs和menu组件配合vue-router来切换页面。

（3）el-menu组件中有一个default-active的属性表示默认激活菜单的 index，用它来绑定

:default-active="activeTabsPath"，这里需要先把el-menu组件的router属性设置为true（表示以index为路径进行跳转），el-menu-item的index属性绑定为路由路径（如：index="/home"）

         el-tabs组件中用v-model属性绑定激活的标签，用它来绑定v-model="activeTabsPath"。

          组件中绑定的activeTabsPath为组件的计算属性，从vuex中接的activeTabsPath数据。

（4）给el-menu-item和el-tab-pane添加点击事件，el-menu-item点击后以绑定的index更新vuex中的activeTabsPath，同时push一个对象（包含el-menu-item的name和index）到vuex的showTabs中（需判断是否与showTabs中的重复）。el-tab-pane点击后用router.push跳转，同时更新vuex中的activeTabsPath。

（5）tabs栏中的标签用vuex的showTabs来循环渲染，到此可实现点击菜单栏跳转页面，同时在tabs栏中新增一个标签，点击标签跳转到已访问的页面，激活标签与激活菜单对应。

（6）在el-tab-pane中有个tab-remove删除标签事件，删除标签后，需同时删除vuex的showTabs中对应的对象。这里还可以多两个情况，删除激活标签和标签数量限制以及最后一个标签，分别对应的是跳转最后一个标签，超出后删除前排标签，以及不允许删除或跳转首页。

（7）为实现刷新后也能保存tabs栏，需在更新vuex数据的同时上传到sessionStorage中，在刷新页面时去sessionStorage中获取activeTabsPath以及showTabs，上传对象需用JSON.parse()处理下载以及JSON.stringif()处理上传。

（8）已访问页面数据的缓存尚未实现，再探索中。