Vue根据菜单json数据动态按需加载路由Vue-router

每个菜单项对应一个页面组件，根据菜单项动态按需加载路由

路由配置的正确写法：

/*router/index.js*/ 
import Vue from 'vue' 
import Router from 'vue-router' 
import url from './url' 
import store from '../store' 
Vue.use(Router) 
const router = new Router({   
    // mode: 'history',   
    routes: url,   
    scrollBehavior (to, from, savedPosition) {     
        return {       x: 0,       y: 0     }   
    } 
}) 
router.beforeEach(({ meta, path, name }, from, next) => {   
    let { auth = true } = meta   
    let isAdmin = localStorage.getItem('admin')   
    let isLogin = Boolean(isAdmin) // true已登录， false未登录   
    if (auth && !isLogin && path !== '/login') {     
        return next({ path: '/login' })   
    }  
    if (!auth && isLogin && path === '/login') {     
        return next({ path: '/home' })   
    }   
    store.dispatch('CUR_MENU', name)   
    next() 
 }) 
 export default router

/*router/url.js*/ 
import data from '../store/data.json' 
const Layout = () => import('@/pages/layout') 
const Login = () => import('@/pages/login') 
const NotFound = () => import('@/pages/notFound') 
function getChildrenPath () {   
    let childrenPath = []   
    for (let i in data) {     
        let sub = data[i].subMenu     
        for (let j in sub) {       
            let component = () => import('@/pages' + sub[j].path + '/index.vue')       
            const item = {         
                path: sub[j].path,         
                name: sub[j].name,         
                component: component       
            }       
            childrenPath.push(item)     
        }   
    }   
    return childrenPath 
} 
const url = [
    {   
        path: '/',   
        component: Layout,   
        children: getChildrenPath() 
    }, 
    {   
        path: '/login',   
        meta: {     auth: false   },   
        name: '登录页',   
        component: Login 
    }, 
    {   
        path: '*',   
        name: '404页',   
        component: NotFound 
    }
] 
export default url

重点：let component = () => import('@/pages' + sub[j].path + '/index.vue')

动态路径写法，不能省略/index.vue

省略的话不会报错，页面加载也正常，但是会弹警告：