如何通过长尾词优化element tab标签管理路由页面的项目实践？

本文共计1456个文字，预计阅读时间需要6分钟。

目录+样式+准备+思路+搭建+搭建页面框架+状态管理+监听路由变化+tab方法+登录与退出登录+样式+准备+搭建优秀的Vue脚手架（Element UI，router，vuex）+Element UI（NavMenu导航菜单，Tabs标签页）+搭建好的Vue页面框架

目录

• 样式
• 准备
• 思路
• 搭建
• 搭建页面框架
• 准备状态管理
• 监听路由变化
• tab方法
• 登录 与 退出登录

样式

准备

• 搭建好的vue脚手架（elementui，router，vuex）
• elementui（NavMenu 导航菜单，Tabs 标签页）

思路

• 将打开的所有路由放到一个栈里（openTab:[]），tabs显示遍历openTab
• 初始状态，将首页推入栈，并设置激活状态
• 当切换路由时(监听路由变化),判断栈里是否存在这个路由，若存在，只改变激活状态；若不存在，则推入栈，并改变激活状态。