Vue路由和组件的按需加载

介绍

Vue router 和 Vue组件的按需加载设置

设置路由的懒加载(按需加载) component 重要

• 普通导入路由的时候 页面如果加载 会把所有路由组件都加在进来
• 当设置路由懒加载的时候 不会一次性加载所有配置的路由 页面加载更快

普通导入路由的方法

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

路由懒加载导入方法

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
        // 这里是导入组件的Home路径
      component: () => import('../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      // 这里是导入组件的About路径
      component: () => import('../views/About.vue')
    }
  ]
})

• 通过变量方法设置懒加载 (Vue3)

// 导入Vue router Vu3
import { createRouter, createWebHashHistory } from 'vue-router'
// 声明常量的方式按需配置路由(变量方式配置路由懒加载)
const Layout = () => import('@/views/layout')
const Home = () => import('@/views/home')
const routes = [
  {
    // 一级路由
    path: '/',
    component: Layout,
    children: [
      // 二级路由
      // 导入路由的懒加载
      { path: '/', component: Home }
    ]
  }
]
const router = createRouter({
  // 设置hash路径方式
  history: createWebHashHistory(),
  // 映射 routes配置的路由
  routes
})
// 导出router实例化对象
export default router

Vue的按需导入组件 import

• 按需导入指的是 当该组件功能用到的时候 才会加载该内容 (普通导入在页面加载时候 就会加载)
• 按需导入可以提高页面打开效率 常用于导入大文件的时候使用(超过50kb)

普通的导入方法

import demo from '导入的路径' // 方式导入 打开页面会加载

按需导入的方法

• 使用的时候 再导入该组件

 import('@/vendor/Export2Excel') // 使用组件的时候 再import导入