路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

使用了懒加载

javascript 复制代码
   export default [ {
        path: '/search/:keyword?',
        component: () =>import('@/pages/Search/index'),
        meta: { showHeader: true, showFooter: true },
        name: 'search'
    }, 
    {
        path: '/login',
        component: () =>import('@/pages/Login/index'),
        meta: { showHeader: false, showFooter: false }
    },]

不使用懒加载

javascript 复制代码
import Login from '@/view/Login'
export default [

     {
        path: '/login',
        component: () =>import('@/pages/Login/index'),
        meta: { showHeader: false, showFooter: false }
    },
]
相关推荐
YBN娜12 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=12 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck16 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!37 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。42 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架