代码拉取完成，页面将自动刷新
vue轻量级后台管理系统基础模板
在线预览
components/Index.vue 文件第 31 行代码的 v-show="isShowAsideTitle" 会造成侧边栏收缩时二级菜单隐藏，目前已修复。
增加页面进度条
在页面跳转时增加进度条
修复路由表冲突问题
退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有冲突的问题，解决办法是在退出登陆时重置路由表。
具体实现请查看 router/index.js、Login.vue 和 Index.vue 的退出登陆回调方法。
优化动态添加路由功能
以前的动态路由功能并不完善，首先要将所有的路由都添加到路由表里，然后根据后台返回的菜单栏数据来生成菜单。
导致的问题就是，虽然有页面在菜单栏上不显示，但由于已经添加到路由表里了，所以可以在地址栏上手动输入在菜单栏上不存在（但在路由表存在）的页面，进而可以越权访问。
现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。而且菜单栏上没有的页面，在地址栏上输入地址也是访问不了的。
另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。
具体实现请看 permission.js 和 util 目录下的 index.js 文件
增加404页面
假如跳转到一个不存在的页面时会重定向到404页面
增加面包屑功能
用于展示当前页面的路径
增加权限控制功能
如果未登陆，访问所有页面都重定向到登陆页
增加动态菜单栏功能
icon使用的是iview组件的icon组件。
数据格式：
// 左侧菜单栏数据
menuItems: [
{
name: 'Home', // 要跳转的路由名称 不是路径
size: 18, // icon大小 非必填
type: 'md-home', // icon类型 非必填
text: '主页' // 文本内容
},
{
text: '二级菜单',
type: 'ios-paper',
children: [
{
type: 'ios-grid',
name: 'T1',
text: '表格'
},
{
text: '三级菜单',
type: 'ios-paper',
children: [
{
type: 'ios-notifications-outline',
name: 'Msg',
text: '查看消息'
},
{
type: 'md-lock',
name: 'Password',
text: '修改密码'
},
{
type: 'md-person',
name: 'UserInfo',
text: '基本资料',
}
]
}
]
}
]
注意： 组件的名称和路由的名称一定要一致，例如 Home.vue 组件名称 name: home，则在路由文件中也要给它设置为 name: home，否则页面内容不能缓存
// 在router文件中
{
path: 'home',
name: 'home',
component: () => import('../views/Home.vue')
}
// 在Home.vue中
export default {
name: 'home'
}
axios拦截器 实现了ajax请求前展示loading 请求结束关闭loading
Index组件一般情况下只需要传数据就行 其他不用关注
市面上有大量的vue后台管理系统模板 但是功能都太丰富了 而且有很多组件用不上 所以写了这么一个最基础的 只有必要功能的模板
UI库使用的是iView 有大量的组件可用
// xxx为你想跳转的子组件name
this.$parent.gotoPage('xxx')
this.gotoPage('userinfo', {
id: id,
})
// 在userinfo组件里取参
this.$route.params.id
git clone git@github.com:woai3c/vue-admin-template.git
cd vue-admin-template
npm i
npm run serve
npm run build
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
