1.路由處理
分為兩部分 ，一部分是不需要權限的或者不需要異步加載的路由 第二部分異步加載的路由。
最后組合成一張路由表。
邏輯在router>index.js
下面是異步路由表的一個構建形式 ，生成的頁面演示
{
'path': '/home',
'icon': 'speedometer',
'name': '首頁',
'redirect': '/home/main/mallboard',
'meta': { title: '首頁', icon: 'dashboard', breadcrumb: false },
'children': [
{
'path': 'main',
'name': '首頁',
'component': 'home/main',
'redirect': '/home/main/mallboard',
'meta': { title: '首頁', icon: 'example', breadcrumb: true },
children: [
{
'path': 'mallboard',
'name': '商城數據看板',
'component': 'home/mallboard',
meta: { title: '商城數據看板', icon: 'eye' }
},
{
'path': 'payboard',
'name': '支付數據看板',
'component': 'home/payboard',
meta: { title: '支付數據看板', icon: 'nested' }
},
{
'path': 'orderboard',
'name': '訂單數據看板',
'component': 'home/orderboard',
meta: { title: '訂單數據看板', icon: 'tree' }
}
]
}
]
},
點擊頂部 首頁-> 'redirect': '/home/main/mallboard',->首先到 這個'/home/main'路由,對應的組件 'component': 'home/main', ，此時這個main.vue的組件會有一個router-view去接受他的子路由的組件。main.vue組件如下
/home/main/mallboard 路由對應的組件mallboard.vue :
這個組件的內容會被上一級的router-view接受。這樣就形成了頂部路由到一級路由，再到二級路由的一個整體流程和組件的對應的。當前二級路由下三級路由組件其實都會放在二級路由組件的router-view里面。具體可以看代碼。