Vue3-38-路由-路由的懒加载

什么是路由的懒加载

一句话概括 ： 
懒加载，就是在初次用到的时候才执行加载；而非一上来就全部加载完毕。

优点 ：
可以提高项目的访问效率。因为一上来不用加载所有的资源。

建议 ：
项目中的所有路由配置都配置为 懒加载的方式。

语法

将组件的导入使用下面的格式 ：
() => import ('../../a.vue')

配置案例

本文只展示路由文件的配置写法 ：
写法一 ： 先声明导入，后直接使用；
写法二 ： 不声明，直接导入使用。

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 懒加载写法一 ： 先声明，下面直接使用
const componentA = () => import('./componentA.vue')

// 声明路由跳转的路径与组件的对应关系
const routsList = [

    // 直接使用上面声明的组件
    {path:'/a',name:'aroute',component:componentA},
    
    // 懒加载写法二 ：直接使用动态导入的语法进行导入
    {
        path:'/b',
        name:'broute',
        component:() => import('./componentB.vue')
    },

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数，表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

以上的配置后，可以正常访问各个组件。