vue动态渲染路由

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

 

Vue.use(Router)

 

let list = [

     {Name:'Home',View:'views/Home.vue'},

     {Name:'Charts',View:'views/Charts/index.vue',Children:[

          {Name:'About2',View:'views/About.vue'},

     ]},

     {Name:'About',View:'views/About.vue'},

]

let routes = []

list.forEach(element=>{

     let newRoute = {

         path: `/${element.Name}`,

         name: element.Name,

         component: () => import(`@/${element.View}`),

         children:[],

    }

    element.Children&&element.Children.forEach(child=>{

        newRoute.children.push({

        path: `${child.Name}`,

        name: child.Name,

        component: () => import(`@/${child.View}`),

    })

})

routes.push(newRoute)

})

export default new Router({

routes

})