vue el-submenu实现导航跳转

样式直接参考ElementUI官网即可

布局确定之后需要实现跳转

vue el-submenu实现导航跳转_第1张图片

(1)el-menu添加route属性,属性的使用查看官网介绍呀

(2)每个el-menu-item的index是跳转的路径,可以理解为配置路由中的path

 (3) default-active:当前激活菜单的 index,至当前点击的路由地址,这个是动态的,所以写的时候需要可动态获取

(4)配置路由

当前这个组件是home.vue,跳转的部分固定在右侧,所以理解为跳转都是在home这个组件内,所以在配置路由时将需在此跳转的组件的子组件中,如下图

vue el-submenu实现导航跳转_第2张图片

 

你可能感兴趣的:(vue)