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

路由配置的正確寫法：

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

轉載于:https://juejin.im/post/5a6a8f13518825732b1a0c9f

總結

以上是生活随笔為你收集整理的Vue根据菜单json数据动态按需加载路由Vue-router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。