vue2.*路由懒加载代码示例

神烦大人

于 2019-11-16 15:42:44 发布

阅读量323

点赞数

分类专栏：工具箱文章标签： vue router vue路由懒加载

本文链接：https://blog.youkuaiyun.com/lifachang/article/details/103099238

版权

工具箱专栏收录该内容

15 篇文章

订阅专栏

本文介绍Vue2.*项目中如何实现路由懒加载，通过动态导入组件提高应用性能。示例代码展示了如何在router/index.js中配置懒加载组件，包括home和detail页面的懒加载实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.*路由懒加载代码示例

以下代码是vue项目src/router/index.js的内容，要使用懒加载的组件，使用views方法引入即可。

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld' // vue-cli自动生成的
const views = name => () => import(`@/view/${name}`) // 懒加载方法

Vue.use(Router)

const routes = [
  {
    path: '/home',
    name: 'home',
    component: views('home') // 使用了懒加载
  },
  {
    path: '/detail',
    name: 'detail',
    component: views('detail') // 使用了懒加载
  },
  {
    path: '*',
    redirect: {name: 'home'} // 当找不到对应路由的时候，跳转到home页面
  }
]

export default new Router({
  routes
})