路由胎教级教学，从零开始第十一章：路由懒加载-CSDN博客

本文链接：https://blog.csdn.net/a13213766526/article/details/127082048

本文介绍如何使用Vue.js实现路由懒加载，通过按需加载组件来优化应用性能。利用webpack特性，将不同路由对应的组件分割成独立代码块，并在访问时动态加载。

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

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

import Vue from 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// import Home from './views/Home.vue'
// import About from './views/About.vue'
// import Item from './views/Item.vue'
// import User from './views/User.vue'
// import Profile from './views/User/Profile'
// import Cart from './views/User/Cart'
// import BookChoose from './views/Book/BookChoose'
// import BookBoy from './views/Book/BookBoy'
// import BookGirl from './views/Book/BookGirl'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
    {
      path: '/item/:itemId',
      name: 'item',
      component: () => import('./views/Item.vue'),
      props: r => ({ itemId: Number(r.params.itemId) })
    },
    {
      path: '/user',
      component: () => import(/* webpackChunkName: "user" */ './views/User.vue'),
      meta: { requiresAuth: true },
      children: [
        {
          path: '',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User/Profile.vue')
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: () => import(/* webpackChunkName: "user" */ './views/User/Cart.vue')
        }
      ]
    },
    {
      path: '/book',
      name: 'book',
      // redirect: { name: 'book-choose' }
      redirect: to => {
        let type = localStorage.getItem('book-type')
        return { name: type || 'book-choose' }
      }
    },
    {
      path: '/book-choose',
      name: 'book-choose',
      component: () => import(/* webpackChunkName: "book" */ './views/Book/BookChoose.vue')
    },
    {
      path: '/book-boy',
      name: 'book-boy',
      component: () => import(/* webpackChunkName: "book" */ './views/Book/BookBoy.vue')
    },
    {
      path: '/book-girl',
      name: 'book-girl',
      component: () => import(/* webpackChunkName: "book" */ './views/Book/BookGirl.vue')
    }
  ]
})

router.beforeEach((to, from, next) => {
  NProgress.start()

  if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) {
      next({
        name: 'login',
      })
  } else {
    next()
  }

  next()
})

router.afterEach((to, from, next) => {
  NProgress.done()
})

export default router