vue路由懒加载

安装vue-router 

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/pages/Home')

Vue.use(Router)

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: '1111'
      },
     } 
  ]
})

使用npm run build 打包,在dist文件夹下,js文件中可以看到

原文档:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

### Vue 路由懒加载的实现方式及最佳实践 #### 1. 动态 `import()` 实现路由懒加载Vue 中,可以通过动态 `import()` 语法来实现路由懒加载。这种方式会在用户访问特定路由时才加载对应的组件,从而减少初始加载时间[^2]。 ```javascript const routes = [ { path: '/foo', component: () => import('@/views/Foo.vue') // 动态导入 Foo 组件 }, { path: '/bar', component: () => import('@/views/Bar.vue') // 动态导入 Bar 组件 } ]; ``` 通过上述代码,`Foo.vue` 和 `Bar.vue` 组件只有在用户访问 `/foo` 或 `/bar` 路由时才会被加载[^2]。 #### 2. 使用 Webpack 的命名功能优化懒加载 为了更清晰地管理懒加载的模块,可以为每个动态导入的模块指定一个名称。这有助于在打包后的文件中识别各个模块,并优化缓存策略[^2]。 ```javascript const routes = [ { path: '/foo', component: () => import(/* webpackChunkName: "foo" */ '@/views/Foo.vue') }, { path: '/bar', component: () => import(/* webpackChunkName: "bar" */ '@/views/Bar.vue') } ]; ``` 通过 `webpackChunkName` 注释,Webpack 会将懒加载的模块打包成单独的文件,并以指定的名称命名[^2]。 #### 3. 结合路由守卫优化懒加载 在某些场景下,可能需要在懒加载之前执行一些逻辑(如权限校验)。此时可以结合 Vue Router 的导航守卫来实现[^2]。 ```javascript const routes = [ { path: '/protected', component: () => import('@/views/Protected.vue'), beforeEnter: (to, from, next) => { if (authService.isAuthenticated()) { next(); // 如果用户已登录,则继续加载组件 } else { next('/login'); // 否则跳转到登录页面 } } } ]; ``` 此示例展示了如何在懒加载组件之前检查用户的认证状态。 #### 4. 懒加载与按需加载的区别 懒加载是指在路由被访问时才加载对应的组件,而按需加载通常指的是根据需求动态加载某些资源(如语言包、图片等)。两者的核心思想都是避免一次性加载所有内容,但适用场景有所不同[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值