动态路由
后端返回的路由信息
```json
{
"code": 0,
"data": [
{
"component": "User",
"icon": "user",
"name": "User",
"path": "/user"
},
{
"component": "Order",
"icon": "ordered-list",
"name": "Order",
"path": "/order"
}
],
"msg": "ok"
}
```
`Home.vue`
```html
<template>
<a-layout id="components-layout-demo-fixed-sider">
<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
<div class="logo" />
<a-menu theme="dark" mode="inline" :default-selected-keys="['4']">
<a-menu-item v-for="(item, index) in menus" :key="index" @click="$router.push({name: item.name})">
<a-icon :type="item.icon" />
<span class="nav-text">{{item.name}}</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout :style="{ marginLeft: '200px' }">
<a-layout-header :style="{ background: '#fff', padding: 0 }" />
<a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
<div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
<router-view name="content"></router-view>
</div>
</a-layout-content>
<a-layout-footer :style="{ textAlign: 'center' }">
Ant Design ©2018 Created by Ant UED
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<style>
#components-layout-demo-fixed-sider .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
</style>
<script>
import getMenus from "../utils/index";
export default {
data(){
return {
menus: []
}
},
mounted() {
getMenus.then(ret=>{
this.menus = ret.data.data;
})
}
}
</script>
```
`router/index.js`
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import getMenus from "../utils/index";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 从后端获取路由, 通过router.addRoute动态添加路由
getMenus.then(ret=>{
ret.data.data.forEach(item=>{
console.log('item:', item);
router.addRoute('Home', {
path: item.path,
name: item.name,
components: {
content: () => import('../views/'+item.component)
}
})
})
})
// 去除跳转当前路由出错消息
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router;
```