vue輕量級後臺管理系統基礎模板
在線預覽vue
2019.3.14 更新
增長404頁面 假如跳轉到一個不存在的頁面時會重定向到404頁面ios
2019.3.8 更新
增長麪包屑功能,用於展現當前頁面的路徑
增長權限控制功能,若是未登錄,訪問全部頁面都重定向到登錄頁git
2019.3.1 更新
增長動態菜單欄功能
icon
使用的是iview
組件的icon
組件。
數據格式:github
// 左側菜單欄數據
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
,不然頁面內容不能緩存ajax
// 在router文件中
{
path: 'home',
name: 'home',
component: () => import('../views/Home.vue')
}
// 在Home.vue中
export default {
name: 'home'
}
複製代碼
axios
攔截器 實現了ajax
請求前展現loading
請求結束關閉loading
Index
組件通常狀況下只須要傳數據就行 其餘不用關注vue-router
市面上有大量的vue後臺管理系統模板 可是功能都太豐富了 並且有不少組件用不上 因此寫了這麼一個最基礎的 只有必要功能的模板 UI庫使用的是iView
有大量的組件可用vuex
// 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
複製代碼