2021-01-06

vue-element-admin左侧导航栏显示新消息提示

我们都知道，左侧导航栏是通过遍历路由显示出来的，就先找到遍历路由的那个页面，再一层层去找。

这个框架是通过layout布局的，找到layout中的Sidebar/index.vue页面，就会发现
图中的sidebar-item标签用了v-for循环遍历了permission_router，permission_router可以去store中的可以找到，但是想实现左侧导航栏消息提醒还是要往下挖一层，从import中可以看到在这个页面中引用了子组件SidebarItem，在SidebarItem中又引用了item，而item页面中就是左侧导航栏的样式标签。

还有一个问题就是item页面，创建和渲染标签是通过render（）函数来的，这个对于只接触过vue的人来说可能会有点陌生，在vue里面用的不多，这个是比较接近底层js，这个在react中用到的频率特别高。

这些都不重要，不明白也一样能改直接利用他原有的vondes.push增加就行了，由于我是想实现动态绑定，我后面会传参进来的，所以就不能写死了，图中的value就是我想传进来的值，这个值是从父组件中传过来的，所以在父组件中一定要声明，并且在该页面也要用prop去接受父组件中传过来的值。

至于你想在哪几个页面显示消息提醒并显示消息数量，可以通过判断来在你想加的页面上加上