每個菜單項對應一個頁面組件，根據菜單項動態按需加載路由

路由配置的正確寫法：

/*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無法實現按需加載動態組件，有什么替代方案可以解決這一需求呢？