# vue-admin
基于vue、element-ui的后台管理系统demo,主要是做了动态操作tabs的实践。
效果图:
![](https://raw.githubusercontent.com/monster1935/vue-admin/master/static/vue-admin.png)
在线demo:[online display](https://monster1935.github.io/vue-admin/#/)
动态tabs操作的思路:
1. 设置一源数组options,该数组用于动态的渲染tabs
2. 点击左侧菜单导航栏时动态的push进options一条数据
3. 删除tabs时,动态的删除options的一条数据
其中的难点(稍有点麻烦的地方)就是和路由之间的绑定,涉及到路由绑定的有以下几个地方:
1. 点击左侧菜单栏时路由需要进行跳转
2. 切换、删除右侧tab时需要进行路由的跳转
3. 浏览器地址栏手动输入路由时进行的跳转
综上:
1. 应用进入时,即首次mounted时,应判断当前路由,根据当前路由加入tabs。目的在于刷新当前浏览器时,保证当前url对应的路由会被添加进tab。
2. 左侧菜单栏点击时,只进行路由的跳转,具体的tabs添加动作放在对$route的监听逻辑中
3. 在对$route的监听逻辑中,判断当前路由是否被添加过tabs,如果添加过,设置当前路由对应的tabs为激活的tab。如果未被添加过,则添加。
4. tabs切换时,动态切换路由
5. tabs删除时,options源数组中删除该条tabs记录,如果删除的这个tab为当前激活的tab,重新设置新的激活的tab,具体的设置激活tab的策略可以不同,该应用中采用了设置最后一个options中的记录为激活的tab。
小技巧:
在设置路由的配置项时,将路由的name项设置为了tabs对应的label,用于路由配置项和对应的tabs匹配。
# how to use
```bash
npm install
npm run dev
```
没有合适的资源?快使用搜索试试~ 我知道了~
基于vueelementui的后台管理系统动态tabs实践
共33个文件
js:16个
vue:5个
png:3个
需积分: 39 21 下载量 142 浏览量
2019-08-10
11:02:52
上传
评论 1
收藏 101KB ZIP 举报
温馨提示
基于vue element-ui的后台管理系统动态tabs实践
资源推荐
资源详情
资源评论
收起资源包目录
基于vueelementui的后台管理系统动态tabs实践.zip (33个子文件)
vue-admin-master
.gitignore 153B
.babelrc 312B
.postcssrc.js 197B
package.json 2KB
package-lock.json 304KB
src
components
ElementTable.vue 2KB
DetailInfo.vue 708B
Template.vue 533B
common
AppNav.vue 2KB
main.js 545B
assets
logo.png 7KB
custom.scss 81B
App.vue 3KB
router
index.js 1KB
store
index.js 873B
build
check-versions.js 1KB
build.js 1KB
dev-client.js 258B
utils.js 2KB
dev-server.js 3KB
webpack.base.conf.js 2KB
webpack.dev.conf.js 1KB
webpack.prod.conf.js 4KB
vue-loader.conf.js 432B
static
.gitkeep 0B
vue-admin.png 32KB
logo.png 7KB
README.md 2KB
config
dev.env.js 156B
index.js 1KB
prod.env.js 61B
index.html 236B
.editorconfig 147B
共 33 条
- 1
资源评论
weixin_39840924
- 粉丝: 492
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功