el侧边栏根据权限不同内容改变实现方案
今天在搭项目基本大框的时候，发现了一个问题，就是我们的产品后台有两个管理端，并且两个管理端所有的功能仅仅查一个功能页面，这个时候就需要考虑两个管理端使用一套，并且不同的账号有不同的权限和页面
因为后台管理基本上都是通过一个home页然后通过子路由来使空白区域进行更迭，所以我们使用上面方法来实现这个方案呢？
v-show方案实现
我们可能最初的想法是通过vuex访问权限来进行判断用户的身份，然后通过v-show来对对应某页进行隐藏
<el-menu v-show="status"> <el-menu-item> <template slot="title"> <span>后台用户管理</span> </template> </el-menu-item> </el-menu> 复制代码
在mounted钩子下获取到登录存储在vuex中的数据，在渲染的过程中就能更好地隐藏，这种方法很简单，但是之后因为一个功能而转而使用了另一种方法来实现
v-for方案实现
第二个方案就是使用v-for方案，首先是准备两个不同的列表项代表不同权限对应的侧边栏
menuList: [ ], commonList: [ { id: 0, menuName: '首页', path: '/welcome' }, { id: 1, menuName: '前台用户管理', path: '/frontuser' }, { id: 2, menuName: '文章管理', path: '/article' }, { id: 3, menuName: '资源管理', path: '/resource' }, { id: 4, menuName: '问答管理', path: '/quiz' } ], superList: [ { id: 0, menuName: '首页', path: '/welcome' }, { id: 1, menuName: '前台用户管理', path: '/frontuser' }, { id: 2, menuName: '后台用户管理', path: '/backuser' }, { id: 3, menuName: '文章管理', path: '/article' }, { id: 4, menuName: '资源管理', path: '/resource' }, { id: 5, menuName: '问答管理', path: '/quiz' } ], 复制代码
再通过mounted中进行权限判断，判断后分别赋上对应的数组，之后再进行v-for渲染，这种实现方案明显地比第一种使用v-show要复杂地很多，需要准备数据，还要鉴权赋值，但是为什么最后选择了这种方案实现，是因为产品有这样一个功能
getList() { console.log(this.$store.state.admin) if (this.$store.state.admin) { this.menuList = this.superList } else { this.menuList = this.commonList } }, 复制代码
header路由标签更新
因为产品图中header有一段标签需要随着子路由的跳转而更新，在使用上文第二种方法之前我尝试了不同方法实现更新标签这个功能，但是总是因为目标跳转路由的获取而失败，我也尝试了在路由守卫实现，但是因为在路由配置中无法使用vuex，而最后以失败告终，所以我尝试了使用v-for实现这个功能，最后通过点击事件来实现header路由标签更新，在渲染项添加事件@click="next(item.menuName)然后因为第二个方案中我们在数据中存储了路由对应的文字，所以就可以随着更新了。
next(router) { this.nextrouter = router } 复制代码
方案改进
因为第二种方案的话是需要两个数组进行判断渲染的，所以不妨换种思路，通过鉴权然后使用数组方法push一个新的对象，这个对象就是所需要的新的路由项目，也是可以的。
if (this.$store.state.admin) this.menuList.push({ id: 2, menuName: '后台用户管理', path: '/backuser' }) 复制代码
