文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue3路由器延迟加载未按预期工作

问Vue3路由器延迟加载未按预期工作
EN

Stack Overflow用户

提问于 2021-05-25 23:39:30

回答 1查看 126关注 0票数 0

我有一个通过vue-cli创建的简单的Vue Hello-world应用程序。有一个路由器，默认情况下应该是惰性的。但是，正如我在浏览器网络选项卡中看到的，它并不是懒惰的。它在第一个页面加载时一次加载所有组件。我所做的唯一一件事就是向路由器添加一条路由。它看起来像documentation示例。此外，正如文档所说，我已经安装了@babel/plugin-syntax dynamic-import和babel.config.js更新。有人能告诉我问题出在哪里吗？

以下是路由器代码：

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

这是babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

vue.js

vue-router

vuejs3

vue-cli

回答 1

Stack Overflow用户

发布于 2021-05-26 03:01:17

好的，所以原因是内容的预取。它以低优先级加载。这意味着它可以下载给定的资源，即使在页面中没有检测到它。以低优先级下载资源。

下面是它在生成的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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67691265

复制

相似问题

问Vue3路由器延迟加载未按预期工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue3路由器延迟加载未按预期工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue3路由器延迟加载未按预期工作
EN