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

路由配置的正确写法：

/*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 } = metalet 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].subMenufor (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

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

参考： vue-router无法实现按需加载动态组件，有什么替代方案可以解决这一需求呢？