因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件的时候,设置公共变量值adminleftnavnum为导航的index,然后在导航所在的组件watch该变量, 设置el-menu的 :active=”adminleftnavnum”,这样基本上就可以实现该效果了。 1、引入扩展库 要使用公共变量,我们先引入vue...
1. 操作src/router/index.js 在该⽂件内内置两组路由,⼀组是基本路由constantRoutes,⼀组是需要权限控制的路由asyncRoutes, 将来在权限控制的路由组内过滤出对应的路由表,在需要权限控制的路由内添加如下代表权限的代码 meta: { roles: ['教师'] } export const constantRoutes = [ // 登录界⾯ { path...
利用select事件函数传递path值,使用this.$router.push()进行路由跳转 说明一下这个方法我在<el-menu>的属性里没有加router属性,还有就是<el-menu-item>里的index属性要写上你将要跳转的路由地址 select绑定的方法里js代码这样写的↓ handleSelect(key, keyPath) {this.$router.push({ path: key, params: {data...
整个router关键信息的位置,这里面还有其他的一些 alias、match、nameMap,还有对应的redirect。所以在后续后台传过来的东西中 这些也是可以包含使用了。 el-menu动态生成菜单 动态路由完成了,前端基本上没什么需要改的,el-menu 加上router属性,index属性将会用于激活route action的path 官方原文 whether vue-router mode i...
3.创建router配置文件 创建文件:在src目录下创建"router"文件夹,里面创建"index.js" index.js里面配置代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import VueRouter from 'vue-router' //引用自定义的组件 import ShouYe from '@/components/ShouYe' import User_Center from '@/components/Use...
el-menu 方法/步骤 1 在Element中提供了NavMenu组件可以为网站提供导航功能的菜单，这里我们主要来研究下侧边折叠导航栏菜单的功能实现，Element提供了一个简单的示例，属性我们可以参考Element官网的NavMenu 导航菜单说明：2 简单介绍下该示例，这里el-menu定义了当前的导航菜单及属性，el-submenu定义了子菜单栏，el-...
vue⾥使⽤element饿了么的el-menu+vue-router实现路由跳转的 两种⽅法 最近准备写⼀个echarts的可视化展⽰案例，⾸先⽤vue-cli3创建了⼀个项⽬（好像vue-cli4也出来，感觉变化不⼤，就没升级了）然后，开始配置路由↓下⾯是我的router.js⽂件 import Vue from "vue";import VueRouter from...
(1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router > <el-me...
vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html element-ui官方网站:https://element.eleme.cn/#/zh-CN 1:components 新建页面 图片.png 2:打开app.vue 写代码 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template> <div> <el-col :span="2"> <el-menu :default-active=...
<router-view></router-view> 我们将路由出口标签放在main组件中 meta为路由元信息,可以设置属性来控制路由的显示与隐藏和icon图标 进入正题 先展示一下组件嵌套关系,切记el-menu标签(element-ui)是放在layout中的index.vue中的,因为这里需要使用到递归组件,需要传递props属性 ...