vuejs 延迟加载组件,无需路由器

2024-05-11

vue 中的延迟加载组件使用 webpack 并不困难:https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/ https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/

我正在尝试将应用程序的初始负载剥离到绝对裸露的骨头..但我希望能够在没有路由器的情况下触发组件的导入。

例如,该应用程序的初始加载将加载:

  • a header
  • 汉堡菜单
  • a dashboard
    • a form
      • 一个简单的形式
      • 根据用户操作,图像上传器被调用
    • 仪表板过滤器控件
    • 列表视图

在初始加载时,用户必须看到除表单和过滤器控制框之外的所有上述内容。

根据文档,为了延迟加载这些组件,我必须将它们包含到路由器中。但我不希望仅为了打开表单而更改 url。

如何在没有路由器的情况下将组件延迟加载到视图中?


如果有人需要答案,那就是这里。
Vue 已经提供了延迟加载功能,无需任何插件,这是我最近发现的。

当然,这在没有 Vue 路由器的情况下也可以工作。

const Component1 = () => import(
  /* webpackChunkName: "/js/component-name" */ './components/Component1'
)

const Component2 = () => import(
  /* webpackChunkName: "/js/component-name2" */ './components/Component2'
)

 const app = new Vue({
  el: '#app',
  components: {
    Component1,
    Component2
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs 延迟加载组件,无需路由器 的相关文章

  • Mongoose 查询执行后回调函数从未被调用

    以下是我的代码 mongoose connect mongodb localhost mydatabase var db mongoose connection db on error console error bind console
  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch
  • 多次训练brain.js?

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN
  • Ionic 2 RC0 和 Angular 2 最新的 Android 构建错误(ngc:错误:静态解析符号值时遇到错误)

    当我使用构建android时出现错误ionic build android命令 ngc 错误 静态解析符号值时遇到错误 引用本地 非导出 符号 字典 考虑导出符号 原始 ts文件中的位置14 8 解析符号TRANSLATION PROVID
  • 由于 MIME 类型而导致资源被阻止?

    多年来我已经成功地包含动态创建的 javascript 文件 这是一个例子 https granadainfo com sups php locs 95 https granadainfo com sups php locs 95 正如你所
  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果
  • jslint 配置 |传递全局变量

    我如何提醒 jshint 我有全局变量 即命名它们 我知道你可以做到这一点 但我不记得语法了 我在这里定义了一个全局的 function window glob1 local var 稍后像这样使用 不同的 IIFE function gl
  • 如何用 JavaScript 修复图像透视变形和旋转?

    我有一些用手机拍摄的图像 有没有可以拉直纸张照片并将其压平的 JavaScript 库 例如 我想创建一个矩形图像 该图像没有任何失真 换句话说我想知道如何用 JavaScript 修复透视变形和旋转 例如 我发现下面的示例图像来自this
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome
  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi
  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮
  • 让 Jest 全局设置和全局拆卸在 TypeScript 项目中工作

    我想运行一个在运行测试之前打开数据库连接的函数 全局设置 以及另一个在运行测试后关闭数据库连接的函数 全局拆卸 目前我有以下配置 包 json jest testEnvironment node globalSetup src jest g
  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set
  • 打字稿和布尔过滤器

    考虑以下code https www typescriptlang org play src var 20a 3A 20 number 20 7C 20null 5B 5D 20 3D 20 5B0 2C 201 2C 202 2C 203
  • 如何使用 Javascript OAuth 库不暴露您的密钥?

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA
  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown
  • javascript:完全删除top.location.hash?

    如果我的地址栏中已经有一个哈希值 例如domain com whatever 我打电话 top location hash wathever 被转换为domain com 没有任何内容 是否可以完全删除哈希值 所以没有 left 因为如果我
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the
  • 使用
    元素作为 JavaScript 代码的输入。这是最好的方法吗?

    各位 显然 我是编码新手 所以最近完成了一些有关 HTML 和 Javascript 的 Lynda 课程后 我的简单 HTML 页面遇到了困难 基本上 我想要的是使用 JavaScript 进行基本计算 让用户使用 HTML 输入两个数字

随机推荐

  • Google 地图无法使用 XHTML Doctype(文档类型)

    到底为什么如果我们在 Google 地图上使用 Doctype 总是有可能出现无法正确显示 Google 地图的问题 在最近的一个案例中 这个 Doctype 只花了我 2 天的时间 却没有任何生产力 多么令人厌恶的案件 这次我得到了一位同
  • Spring:如何使用 GenericDao 获取多个数据源?

    我有一个使用 Spring 3 1 1 的网络应用程序 我们有一个使用 JdbcTemplate 的 genericDao 数据源在 GenericDaoImpl 中像这样注入 public class GenericDaoImpl
  • 如何将 UILabel 与个人资料照片图像水平对齐?

    我必须显示名称和电子邮件 ID 与个人资料图像正确水平对齐 这样姓名和电子邮件 ID 就出现在 UIImageView 的中心 但您可以看到姓名和电子邮件 ID 不在个人资料图片的中心 为什么会发生这种情况 我给出了以下限制 删除前导和尾随
  • 如何使用 Nuxt ServerMiddleware 和 Apollo GraphQL 处理 301 重定向

    我目前正在构建一个 Vue Nuxt 应用程序 并结合修改后的 Saleor 安装来在线销售产品 当我们从现有系统迁移时 我们需要能够处理从旧网站 URL 到新网站 URL 的 301 重定向 我修改了 API 以响应以下 GraphQL
  • 将图片添加到图库 - Android

    我有一个活动 用相机拍照 然后将其添加到正确的文件夹 在本例中为 DCIM Camera 但是当你退出应用程序并加载 Android 图库时 它不在那里 我正在玩一些游戏 发现它只在重新启动手机后才出现 我不确定这背后的原因 也许它必须创建
  • 如何避免在 webpack 生产构建中重复模块“bn.js”?

    我的应用程序使用了 webpack 4 不知何故 bn js包在生产构建中占用了大量资源 从图中可以看出 它占用了594 22KB 数据 有没有办法让1个文件bn js对于所有依赖于的包bn js 发生这种情况可能是因为您的依赖项都需要不同
  • 禁用选择标签内的一个选项值在 IE6Ha 中不起作用[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个包含 4 个值 a b c d 的选择框 我只想禁用下拉列表中的 c 我使用了禁用属性 它在所有浏览器中都有效 但在 IE6
  • 在 pyproject.toml 的动态字段中使用 python 脚本生成的值

    我试图找到一种使用 pyproject toml 内的 python 脚本生成的值的方法 例如 假设我们有一个函数random version 我正在使用 setuptools 来构建包 import random def random v
  • 从 jQuery 事件访问函数中的参数*和*事件

    这是我不久前问的另一个问题的后续问题 通常 您可以从 jQuery 事件的函数调用中访问事件 如下所示 item live click functionToCall 并在函数中 function functionToCall ev do s
  • 为什么 std::shared_ptr 实现中需要两个指向托管对象的原始指针?

    这是 cppreference 的实现说明部分的引用std shared ptr 其中提到有两个不同的指针 如粗体所示 可以通过get 以及在控制块内保存实际数据的一个 在典型的实现中 std shared ptr仅保存两个指针 存储的指针
  • 在 R 中捕获段错误

    我得到了caught segfault每次我尝试从以下位置运行任何绘图函数时都会出错ggplot2包 1 0 0 我已经尝试过这个qplot geom dotplot geom histogram等来自包的数据 例如diamonds or
  • Python SQLite SELECT LIKE IN [列表]

    如何在Python中编写SQL查询来选择Python列表中的元素 例如 我有 Python 字符串列表 Names name 1 name 2 name n 和 SQLite table 我的任务是找到最短路线 SELECT element
  • Python选择列表中最长字符串的最有效方法?

    我有一个可变长度的列表 并且正在尝试找到一种方法来测试当前正在评估的列表项是否是列表中包含的最长字符串 我正在使用Python 2 6 1 例如 mylist abc abcdef abcd for each in mylist if co
  • 使用 buildSchema 时如何访问字段解析器内父解析器的值?

    当我们使用 graphqlHTTP 时 传递给解析方法的第一个参数实际上是客户端查询传递的参数 而不是 root 这对于查询解析器来说很好 但是对于字段解析器需要知道父级值的用例 如何实现这一点 type Person name Strin
  • Flutter中如何在弹出屏幕后调用函数更新值?

    屏幕 1 显示带有添加按钮的项目列表 屏幕 2 用于将新项目添加到列表的表单 屏幕 2 gt gt 屏幕 1 在屏幕 2 中调用 navigator pop 时 如何在屏幕 1 中调用方法 setState 更新列表 谁能帮我吗 我不想再次
  • 在 Visual Studio Code 中调试 Strapi

    我正在尝试在 VS Code 中调试我的 Strapi 项目 3 0 0 beta 16 6 我的启动 json type node request attach name Attach to strapi port 9229 我的pack
  • Ruby Regex 舍入尾随零

    我正在寻找一个正则表达式来删除十进制数字中的尾随零 它应该返回以下结果 0 0002300 gt 0 00023 10 002300 gt 10 0023 100 0 gt 100 1000 gt 1000 0 0 gt 0 0 gt 0
  • Office JavaScript API:突出显示文档中的文本

    我正在使用 Microsoft Office JavaScript API 开展一个业余项目 我一直依赖着文档 https learn microsoft com en us office dev add ins reference jav
  • 是否可以使用谷歌地图从坐标获取地址?

    我只是好奇 也许是为了未来的项目 我想知道是否可以通过 Google API 从给定坐标检索地址 是的 只需使用 Google 地理编码和 Places APIhttps developers google com maps documen
  • vuejs 延迟加载组件,无需路由器

    vue 中的延迟加载组件使用 webpack 并不困难 https alligator io vuejs lazy loading vue cli 3 webpack https alligator io vuejs lazy loadin