EasyCVS右侧菜单栏的activeindex选定以及重定向
原创EasyCVS右侧菜单栏的activeindex选定以及重定向
原创
TSINGSEE青犀视频
修改于 2021-04-13 17:46:12
修改于 2021-04-13 17:46:12
文章被收录于专栏：TSINGSEE青犀视频
上一篇我们解决了EasyCVS视频管理平台在小屏状态下菜单栏的问题（视频管理平台菜单栏小屏自适应优化记录）。但是在实际使用中，EasyCVS右侧菜单栏在顶部菜单栏切换时，菜单栏的activeindex就会改变，此时，若是打开右侧菜单栏，相应的也是需要切换到相应菜单栏item，同时在页面刷新时也需要重定向到相应的activeIndex。
首先右侧菜单栏是使用elementUi的el-menu组件，该组件自带default-active 属性，当顶部导航栏切换时将他的activeIndex值给右侧的导航栏default-active 值即可。
而重定向是检测路由地址，来获取事先确定好的每个导航栏的item对应的路由地址，然后将每个路由的activeInde值给导航栏的default-active赋值即可。
参考代码如下：
<el-menu
:default-active="activeIndexRight"
class="el-menu-vertical-demo"
@open="handleOpen"
@select="select"
background-color="#292C33"
text-color="#fff"
@close="handleClose"
:router="true"
>
<el-menu-item index="0" :route="'/scrren'">
<span slot="title">实时预览</span>
</el-menu-item>
<el-menu-item index="1" :route="'/live/lis'">
<span slot="title">视频直播</span>
</el-menu-item>
<el-menu-item index="2" :route="'/user/list'">
<span slot="title">用户管理</span>
</el-menu-item>
<el-menu-item index="3" :route="'/space/list'">
<span slot="title">空间管理</span>
</el-menu-item>
<el-menu-item index="4" :route="'/bucket/list'">
<span slot="title">对象存储</span>
</el-menu-item>
</el-menu>
//导航栏重定向
RouteRedirection() {
var path = this.$route.path;
let paths = [
{ path: "/scrren", type: 0 },
{ path: "/live/list", type: 1 },
{ path: "/user", type: 2 },
{ path: "/space", type: 3 },
{ path: "/bucket", type: 4 },
{ path: "/oss/list", type: 5 },
];
for (const i in paths) {
if (path.indexOf(paths[i].path) != -1) {
this.activeIndex = paths[i].type;
this.activeIndexRight = JSON.stringify(this.activeIndex);
console.log(this.activeIndex, "路由");
return;
}
}
},EasyCVS目前虽不对外开放，但有兴趣的用户可以先了解EasyCVR。EasyCVR目前已经支持RTSP、GB28181、Ehome、海康SDK、大华SDK等协议设备的接入，其他主流厂家的私有协议在不断扩展中。因此从长远来看，EasyCVR具备很高的使用价值和适配性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
腾讯云开发者
