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属性值时...
// 监听,当路由发生变化的时候执行watch:{$route(to,from){console.log(to.path);}},或者// 监听,当路由发生变化的时候执行watch:{$route:{handler:function(val,oldVal){console.log(val);},// 深度观察监听deep:true}},或者// 监听,当路由发生变化的时候执行watch:{'$route':'getPath'},methods:{ge...
<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-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默认的方法在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> ...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
<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){ ...
<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 ...
二、在App.vue中,添加跳转路由,代码如下: <template><divid="app"><el-container><el-headerclass="el-header"style="background-color: black"><home-header></home-header></el-header><el-container><el-asidewidth="200px"><!--引入自定义左侧菜单栏--><left-menu></left-menu></el-aside><el...