經過簡易配置動態在線生成Vue+ELementUI 腳手架

經過簡易配置動態在線生成Vue+ELementUI 腳手架

地址： 在線生成

好比咱們要創建這樣一個結構的管理系統：

• 首頁
• 頁面1

• 頁面2

  • 頁面2-1
  • 頁面2-2

  • 頁面2-3

    • 頁面2-3-1
    • 頁面2-3-2
• 頁面3
• 頁面4

那麼咱們就只須要這樣寫即可以直接搭建好你須要的架構了

[
    {label: '首頁'},
    {label: '頁面1'},
    {label: '頁面2', children: [
        {label: '頁面2-1'},
        {label: '頁面2-2'},
        {label: '頁面2-3', children: [
            {label: '頁面2-3-1'},
            {label: '頁面2-3-2'}
        ]},
    ]},
    {label: '頁面3'},
    {label: '頁面4'}
]

點擊提交就能夠生成你要的架構了，若是你已經安裝了vue的開發環境了，那解壓後

cd project
npm i //cnpm i
npm run dev

即可以啓動了

動態路由

並且也許你還會根據角色的不一樣來動態路由，沒錯，也很是方便

編輯 src/permission.js 中的 這段代碼就能夠了

function getRoutes() {
    return new Promise(resolve => { 
        /**
         * api.call("/User/getRoutes").then(res => {
         *      //res.data爲route Name數組
         *      resolve(filter(routes, res.data))
         * })
         */   
        resolve(filter(routes, []))
    })
}

好比a用戶沒有 '頁面1', '頁面2-3-1' 兩頁面, 那麼， 數組爲routes.js中的name屬性

function getRoutes() {
    return new Promise(resolve => { 
        resolve(filter(routes, ['YeMian1', 'YeMian2/YeMian2-3/YeMian2-3-1']))
    })
}

好比b用戶沒有 '頁面2' 模塊

function getRoutes() {
    return new Promise(resolve => { 
        resolve(filter(routes, ['YeMian2']))
    })
}