Vue.js Vue3路由器延迟加载无法按预期工作
我有一个通过Vue cli创建的简单Vue Hello world应用程序。有一个路由器默认情况下应该是惰性的。但正如我在浏览器网络选项卡中看到的，它并不是懒惰的。它在第一页加载时一次加载所有组件。我所做的唯一一件事就是向路由器添加一条路由。这看起来像一个例子。正如文档所说，我已经安装了@babel/plugin syntax dynamic import并更新了babel.config.js。谁能告诉我有什么问题吗 以下是路由器代码：Vue.js Vue3路由器延迟加载无法按预期工作,vue.js,vue-router,vuejs3,vue-cli,Vue.js,Vue Router,Vuejs3,Vue Cli,我有一个通过Vue cli创建的简单Vue Hello world应用程序。有一个路由器默认情况下应该是惰性的。但正如我在浏览器网络选项卡中看到的，它并不是懒惰的。它在第一页加载时一次加载所有组件。我所做的唯一一件事就是向路由器添加一条路由。这看起来像一个例子。正如文档所说，我已经安装了@babel/plugin syntax dynamic import并更新了babel.config.js。谁能告诉我有什么问题吗 以下是路由器代码： import { createRouter, create
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/contact',
name: 'Contact',
component: () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue'),
props: {
title: 'Contact',
test: 'Some test value',
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
"@babel/plugin-syntax-dynamic-import"
]
}
好的，原因是内容的预取。它的优先级较低。这意味着它可以下载给定的资源，即使它在页面中未被检测到。资源以低优先级下载 这是它在生成的html中的外观：
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>vue-hello-world</title>
<link href="/js/about.b54d7802.js" rel="prefetch">
<link href="/js/contact.35a4dd8d.js" rel="prefetch">
<link href="/css/app.f824e728.css" rel="preload" as="style">
<link href="/js/app.b9f6d9e9.js" rel="preload" as="script">
<link href="/js/chunk-vendors.2fe81e6e.js" rel="preload" as="script">
<link href="/css/app.f824e728.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but vue-hello-world doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong></noscript><div id="app"></div>
<script src="/js/chunk-vendors.2fe81e6e.js"></script>
<script src="/js/app.b9f6d9e9.js"></script>
</body>
</html>
vue你好世界
很抱歉，没有启用JavaScript，vue hello world无法正常工作。
请使其继续。
chunk vendors.js节点模块