问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue2.6 router.js 路由文件的这样写法是按需加载吗？

头像
豫则立
    31413590

    现在第一次打开登录页面，把所有路由的页面.js全部加载了，第一次打开时间很长，
    按网上的路由按需加载方式设置了，没有起作用。

    export const constantRoutes = [
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index'),
    meta: {
      navigation: true
    },
    hidden: true
  }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  //base: "/Hisense/www/web/",
  routes: constantRoutes
})

const router = createRouter()

router.$addRoutes = (params) => {
  router.matcher = new Router({ // 重置路由规则
    routes: constantRoutes.concat(fixedRoutes)
  }).matcher
  router.addRoutes(params) // 添加路由
}

    解决方法，
    在服务器上开启gzip压缩，解决加载时间长的问题了。

    路由vue2打包
    阅读 1.6k
    avatarAI BotBETA

    不是按需加载。

    在 Vue 2.6 中，如果你的 router.js 文件中的路由配置没有正确地使用动态导入（import()），那么即使你按照网上的按需加载方式设置了，也可能没有实现真正的按需加载。

    通常，按需加载（也称为代码分割）是通过动态导入来实现的。以下是一个基本的例子，展示了如何在 Vue Router 中使用动态导入来实现按需加载：

    // router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'Login',
    // 使用动态导入实现按需加载
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    // 其他页面的按需加载
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  // 其他路由配置...
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

    在上面的例子中，component 属性使用了箭头函数和 import() 语法来动态导入组件。Webpack 会识别这种语法，并自动将代码分割成单独的块（chunks），这些块只有在需要时才会被加载。

    如果你的 router.js 文件中的路由配置没有使用这种动态导入的方式，而是直接引入了所有组件，那么所有相关的 .js 文件都会在应用启动时被加载，从而导致第一次打开时间很长。

    请检查你的 router.js 文件，确保你使用了动态导入的方式，并且 Webpack 配置正确支持了代码分割。如果你已经这样做了，但问题仍然存在，可能需要检查其他可能的配置问题或代码错误。

    1 个回答
    得票最新
    头像
    豫则立
      31413590
      ✓ 已被采纳

      在服务器上开启gzip压缩，解决加载时间长的问题了。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题