vue 路由-->进行路由懒加载

引入路由文件

import Vuefrom 'vue'

import Routerfrom 'vue-router'


动态引入路由组件

const GamePlatForm = () =>import(/* webpackChunkName: "group-foo" */ '@/pages/game/platForm/platForm')

const GamePlatFormAdd = () =>import(/* webpackChunkName: "group-foo" */ '@/pages/game/platForm/platFormAdd')

const GamePlatFormEdit = () =>import(/* webpackChunkName: "group-foo" */ '@/pages/game/platForm/platFormEdit')

const GamePlatFormMain = () =>import(/* webpackChunkName: "group-foo" */ '@/pages/game/platForm/platformMaintenance')


/* webpackChunkName: "group-foo" */  目的是为了方便进行页面组件划分,加载什么组件。组件进行分类


这里需要配置一个文件,build文件下的,base.config文件

output: {

path:config.build.assetsRoot,

  filename:'[name].js',

  publicPath: process.env.NODE_ENV ==='production'

    ?config.build.assetsPublicPath

    :config.dev.assetsPublicPath,

  chunkFilename:'[name].js'         -------------- 需要配置的文件

},



正常调用即可:

{

path:'/bgmwaitevent',

  name:'BgmWaitEvent',

  component: BgmWaitEvent,

  meta: {keepAlive:true}

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容