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

路由配置的正确写法：

/*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

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

参考：