脚本宝典收集整理的这篇文章主要介绍了vue轻量级后台管理系统基础模板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
增加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@R_360_1718@:woai3c/vue-admin-template.git
cd vue-admin-template
npm i
npm run serve
npm run build
以上是脚本宝典为你收集整理的vue轻量级后台管理系统基础模板全部内容,希望文章能够帮你解决vue轻量级后台管理系统基础模板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。