将上述创建的导航菜单组件引入到你的全局布局或者需要的地方: <template><divid="app"><NavigationMenu/><!--使用导航菜单--><router-view></router-view><!--显示路由对应的视图--></div></template><script>import NavigationMenu from'./components/
1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加router-view标签 c.在菜单栏的 el-menu ...
res.menu);// 动态添加路由菜单store.commit('addMenu',router);//获取的Token值存储store.commit('setToken',res.token);router.push({name:'home',});ElMessage({message:'登录成功',type:'success',});};
1. 这里先看一眼之前的菜单文件,这里已经把component参数给加好了,如果直接用el-menu的话,这个参数用不上。role也是新加的,后续留着判断菜单权限用。 const asyncRoutes = [ { "path": "/system", "name": 'SystemIndex', "component": "system", "meta": { "title": "系统管理", "icon": "el-ico...
{goToMenu(){this.$router.go(-1)//跳转到上一次浏览的页面 this.$router.replace('/menu')//指定跳转的地址 this.$router.replace({name:'menuLink'})// 指定跳转路由的名字下 this.$router.push('/menu')通过push进行跳转 this.$router.push({name:'menuLink'})通过push进行跳转路由的名字下}}}</...
3.修改菜单代码,el-menu标签中加入:router="true" <el-menu ref="menu" default-active="1" :unique-opened="true" mode="vertical" :router="true" background-color="#093263" 1. 4.在子菜单增加click事件 <el-menu-item index="one" @click="handleMenuClick('one')">变压器监测1</el-menu-item...
</el-dropdown-menu> export default { methods: { onCreate() { this.$router.push({ path: '/categories/create' }) } } } 我可以使用this.$router方法进行操作路由 执行了push或跳转操作还远远不够,我们还在router.js上进行路由(目录)添加你需要对应标准的地址以及地址包含component组件,不然编译器不知道...
vue⾥使⽤element饿了么的el-menu+vue-router实现路由跳转的两种⽅法最近准备写⼀个echarts的可视化展⽰案例，⾸先⽤vue-cli3创建了⼀个项⽬（好像vue-cli4也出来，感觉变化不⼤，就没升级了）然后，开始配置路由↓下⾯是我的router.js⽂件 import Vue from "vue";import VueRouter from "...
<div id="menu"> <router-link to="/student?id=0">学生0</router-link> <router-link to="/student/post?id=0">学生0的文章</router-link> <router-link to="/student/comment?id=0">学生0的评论内容</router-link> </div> <!-- 4、在模板当中,使用路由默认的标签,指定渲染组件的位置(坑位)...
<el-menu-item v-for="item in $router.options.routes[1].children[1].children" :key="item.path" :index="item.path"> {{item.name}} </el-menu-item> </el-menu> </div> <!-- 渲染路由 --> <router-view></router-view> </section> ...