Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程
数据准备:JSON数据转换成树状
参考文章: JS实现 JSON扁平数据转换树状数据
后台我拿的数据是这样的格式:
[
{id:1 , parentId: 0, name: '', level: 0},
{id:2 , parentId: 0, name: '', level: 0},
{id:3 , parentId: 2, name: '', level: 1},
{id:4 , parentId: 2, name: '', level: 1},
{id:5 , parentId: 4, name: '', level: 2},
]
转换后的数据差不多就是这样的格式
{
[
{
id: 1,
name: ''
},
{
id: 2,
name: '',
children: [
{
id: 3
},
{
id: 4,
children: [
{
id: 5
}
]
}
]
},
]
}
自定义组件 路径 componebts/NavMenu.vue
<template>
<fragment class="navMenu">
<template v-for="navMenu in navMenus">
<!-- 最后一级菜单 -->
<el-menu-item v-if="!navMenu.children" :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuUrl+'/'+navMenu.menuId">//带参数ID
<i :class="navMenu.menuIcon"></i>
<span slot="title" >{{navMenu.menuName}}</span>
</el-menu-item>
<!-- 此菜单下还有子菜单 -->
<el-submenu v-if="navMenu.children"
:key="navMenu.menuId" :data="navMenu" :index="navMenu.menuId">//navMenu.menuId解决跳转相同路由页面 展开菜单问题
<template slot="title">
<i :class="navMenu.menuIcon"></i>
<span slot="title"> {{navMenu.menuName}}</span>
</template>
<!-- 递归 -->
<NavMenu :navMenus="navMenu.children"></NavMenu>
</el-submenu>
</template> </fragment>
</template> <script>
export default {
name: 'NavMenu',
props: ['navMenus'],
data() {
return {}
},
methods: {}
}
</script> <style>
</style>
自定义组件包含在 fragment 不是div 不然展开和缩人会出现显示问题
如下:
解决菜单导航折叠后文字不隐藏
出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一
但是我们又不能直接删掉<div>,因为<template>中包含的必须是一个根标签,而v-for会形成不确定的并列标签
项目安装vue-fragment
cnpm install --save vue-fragment 在main.js中引入
// main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin) <div>修改为<fragment>即可
:index="" 指的是路由跳转的地址
路径 在你需要的页面引入组件 嵌套在div里面可以避免不必要的错误
<template>
<div >
<el-menu default-active="this.$router.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
mode="vertical"
background-color="#2c2e2f"
text-color="#bfcbd9"
active-text-color="#85c1e7"
:default-active="activeIndex"
router>
<NavMenu :navMenus="sret"></NavMenu>
</el-menu>
<router-view :key="$route.path + $route.query.t"></router-view>
:key="$route.path + $route.query.t" //解决跳转到相同路由页面 数据不刷新问题
</div> </template>
<script type="text/ecmascript-6">
import NavMenu from "@/components/NavMenu" //组件位置
export default {
components: { //定义组件
NavMenu,
},
name: 'login',
data() {
return {}
}
}
:navMenus="sret" 这里的sret是后台拿过来的JSON树状数据 数据要转换成树状的 不然不行 吧转换后的数据赋值sret 让路由在<router-view></router-view>打开 定义路由和跳转的页面 路径 router/index.js 里面
需要几个页面就按这样的跳转 都要引入
import Ibookmark from '@/views/bookmark';
..........
// 启用路由
Vue.use(Router); // 导出路由
export default new Router({
routes: [{
path: '/login',
name: '',
component: login,
children: [
{
path: '/bookmark/:menuId',
component: resolve => require(['../views/bookmark.vue'], resolve),
query:{
t:Date.now(), //解决跳转到相同路由页面 数据不刷新问题
}, },
],
},........省略
父子路由 是层级关系 children: []
:index="navMenu.menuUrl+'/'+navMenu.menuId" 注意看 路径 我这里传了ID参数 是为了在路由里面显示不同的数据 然后在路由的页面 获取点击的菜单id 渲染不同的数据
this.$route.params this.$route.query 多种取值的方式我都试了 没成功在页面取出id 然后我用的是URL的截取/后面的ID方法
aaa() {
var _this=this
var url = window.location.href;
var index = url.lastIndexOf("\/");
_this.menuId = url.substring(index + 1,url.length);
}, 获取到最后一个斜杠后面的数据 赋值给menuId 实现 菜单跳转到相同的路由 根据ID渲染不同的数据 如果不设置:key="$route.path + $route.query.t" 会出现数据ID不刷新问题
设置后 每次跳转 都会出现读取id 然后操作ID操作数据
Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据的更多相关文章
- VUE 路由参数改变重新刷新数据
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...
- SQL实现类似于自动刷新数据的功能
有时需要在SQL中,定时刷新某张表,比如说是要定时查询某张表的行数,通常做法就是手动的按F5去执行来刷新数据.但是如果这个定时查询历时较长,10分钟,或半小时,手动的话肯定是要崩溃了.貌似SQL没有像 ...
- Echarts自动刷新数据
1.Echarts自动刷新数据 1.Echarts柱状图的正常配置 注:声明了 myChart.test这两个都有用 官方示例中myChart是声明在 function(ec)里面的 <scri ...
- vue + element-ui 制作下拉菜单(可配置路由、可根据路由高亮list、可刷新自动展开定位路由)
本篇文章分享一篇关于 vue制作可路由切换组件.可刷新根据路由定位导航(自动展开).可根据路由高亮对应导航选项 一.实现的功能如下: 1.可折叠导航面板 2.点击导航路由不同组件 ...
- Spring MVC(三)控制器获取页面请求参数以及将控制器数据传递给页面和实现重定向的方式
首先做好环境配置 在mvc.xml里进行配置 1.开启组件扫描 2.开启基于mvc的标注 3.配置试图处理器 <?xml version="1.0" encoding=&qu ...
- vue的自定义指令控制菜单权限
用户登录后,选择子节点,节点中含有多个菜单,可以根据后台返回的权限数据进行权限控制 在vue上挂载自定义指令方法,根据后台返回权限移除相应节点 import Cookies from "js ...
- vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...
- Vue 的自定义事件系统:实现子组件跟父组件通信
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 v-on 写在引用的子组件上, 语句 this.$emit('xxx') ,写在子组件里.
- Vue Element-ui自定义dialog样式
第一步:定义 自定义dialog class名 第二步:全局修改自定义样式 自定义dialogStyle有三个儿子,这样只用找到他们就可以自定更改啦 .custonStyle { xxxxx } .c ...
随机推荐
- 2018-2-13-win10-UWP-九幽数据分析
title author date CreateTime categories win10 UWP 九幽数据分析 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...
- 为什么我们要使用DTO
基础结构解释 UI-表现层-与控制器打交道(UI向Controller 传递数据时使用DTO(数据传输对象)) Service-应用服务层 Domain 领域对象 DTO 数据传输对象,一般只包含基础 ...
- E420笔记本升级固态硬盘
后壳比较好拆 机械硬盘盒 这里 可费了好大劲 才 拧开这 4个螺丝 光驱支架买的这个38-5rmb,京东自提 以前不知道的一件事: 原来的光驱挡板要自己拆下来换到新买的光驱支架上面 ...
- jitamin基于lnmp环境搭建
从github上面下载源代码 cd /Data/apps/nginx/html git clone https://github.com/jitamin/jitamin.git 修改配置文件 cd ...
- 洛谷$P2523\ [HAOI2011]\ Problem\ c$ $dp$
正解:$dp$ 解题报告: 传送门$QwQ$ 首先港下不合法的情况.设$sum_i$表示$q\geq i$的人数,当且仅当$sum_i>n-i+1$时无解. 欧克然后考虑这题咋做$QwQ$. 一 ...
- 洛谷$P2617\ Dynamic\ Rankings$ 整体二分
正解:整体二分 解题报告: 传送门$w$ 阿查询带修区间第$k$小不显然整体二分板子呗,,, 就考虑先按时间戳排序(,,,其实并不需要读入的时候就按着时间戳排的鸭$QwQ$ 每次二分出$mid$先把所 ...
- 菜鸟系列Fabric源码学习 — MVCC验证
Fabric 1.4 源码分析 MVCC验证 读本节文档之前建议先查看[Fabric 1.4 源码分析 committer记账节点]章节. 1. MVCC简介 Multi-Version Concur ...
- 手把手带你了解消息中间件(3)——RocketMQ
一.RocketMQ简介 RocketMQ作为一款纯java.分布式.队列模型的开源消息中间件,支持事务消息.顺序消息.批量消息.定时消息.消息回溯等. 二.RocketMQ架构 如图所示为R ...
- 常用加密算法-Delphi XE 10.3.3
主要用到 DELPHI XE 10.2新增HASH函数 class function TUtils.GetStringMD5(const AInPut: string): string; begin ...
- cannot open git-upload-pack,cannot open git-receive-pack,Can't connect to any URI错误解决方法eclipse
cannot open git-upload-pack,cannot open git-receive-pack,Can't connect to any URI错误解决方法eclipse 解决ecl ...