1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时...
<el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-con...
<el-menu-itemindex="/charts/line">折线图</el-menu-item> </el-submenu> </el-menu> </el-aside> 第一种方法: 利用select事件函数传递path值,使用this.$router.push()进行路由跳转 说明一下这个方法我在<el-menu>的属性里没有加router属性,还有就是<el-menu-item>里的index属性要写上你将要跳转的路...
使用的是el-menu默认的方法在el-menu标签设置router,给每个el-menu-item设置index代码如下: <el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router > <el-menu-item index="index"> <i class="el-icon-menu"></i> ...
<el-menu-itemindex="/Material">我要找</el-menu-item> <el-menu-itemindex="/Workbench">工作台</el-menu-item> </el-menu> </template> <script> exportdefault{ data() { return{ activeIndex:this.$route.path }; }, watch:{ '$route'(to,from){ ...
使用场景:点击页面内跳转按钮 导航菜单选中 在element中有个NavMenu 导航菜单 组件 在A菜单页面中,有一个按钮button组件,点击这个button跳转到B菜单页。虽然页面已经跳过去了,但是导航菜单的选中状态并没有发生改变,还在A菜单上面。也就是default-active,还停留在A上。
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
<el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> routes: [ { path: '/test1', name:'Test1', component: Test1 }, { path:'/test2', name:'Test2', component: Test2 ...
1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时...