懒加载：又叫延时加载，即在需要的时候进行加载，随用即载

使用懒加载的原因：

像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载过多资源造成时间过长

https://blog.csdn.net/weixin_42331327/article/details/108463527  Vue3.0 路由的配置

Vue3路由(跟vue2差别不大) 1.安装vue-router 最新 支持vue3 router的版本eg: “vue-router”: “^4.0.0-beta.13”

由于 vue-cli 没有直接支持创建 Vue3.0 项目，所以需要通过插件升级，我们输入指令：

vue add vue-next

import { createRouter,createWebHashHistory } from 'vue-router'

const HelloWorld = () => import("@/components/HelloWorld") 
const routes = [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
]
const router = createRouter({
  //负责管理历史的属性，有三种历史可选
  //hash,history,memory
  history: createWebHashHistory(),
  routes
});
 
export default router
 
//代码中编程式导航也是通过createRouter获取router的,route也一样

main.js引入
import router from './router/index' //引入
app.use(router) 
app.mount('#app')或者

createApp(App).use(router).mount('#app') 或者

懒加载的使用方法：

ES 提出的import方法，（------最常用------）方法如下：const HelloWorld = （）=>import('需要加载的模块地址')

（不加 { } ，表示直接return） 

path:'/study',  path:'/小写’

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = () => import("@/components/HelloWorld") 
const HelloWorld = () => import('../pages/HelloWorld/HelloWorld') //推荐这种 简洁直观
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
    {
      path: '/index',
      name: 'Index',
      component:Index
    }
  ]
})

vue异步组件实现懒加载 方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

index.js

import Vue from 'vue';
import Router from 'vue-router';
import routers from './router';
const router = new Router({
  routes: routers
})

export default router
 
//代码中编程式导航也是通过createRouter获取router的,route也一样

嵌套路由

注意：父路由不需要设置name属性

export default new Router({
    routes: [
    {
      path: "/",
      name: "Index",
      meta: {
        title: "首页"
      },
      component: Index,
      alias: "/home"
    },
    {
      path: "/Aboutus",
      component: () => import("@/pages/Aboutus/Aboutus"),
      meta: {
        title: "关于我们"
      },
      redirect: "/Aboutus/Work", //重定向 到默认子路由
      children: [
        {
          path: "Study", //默认子路由 子页1 //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
          name: "Study",
          component: Study
        },
        {
          path: "Work",
          name: "Work",
          component: () => import("@/pages/Aboutus/Work"),
          meta: {
            title: "work"
          }
        },
        {
          path: "Hobby",
          name: "Hobby",
          component: Hobby
        }
      ]
    }
    
  ]
})


再嵌套：
{
      path: "/Aboutus",
      component: () => import("@/pages/Aboutus/Aboutus"),
      meta: {
        title: "关于我们"
      },
      redirect: "/Aboutus/Work", //重定向 到默认子路由
      children: [
        {
          path: "Study", //默认子路由 子页1 //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
          name: "Study",
          component: Study
        },
        {
          path: "Work",
          //name: "Work",
          component: () => import("@/pages/Aboutus/Work"),
          redirect: "/Aboutus/Work/One",//重定向 到默认子路由
          meta: {
            title: "work"
          },
          children: [
            {
              path: "One",
              name: "One",
              component: () => import("@/pages/Aboutus/children/one"),
              meta: {
                title: "One"
              }
            }
          ]
        },
      ]
    }



别忘记：
<transition mode="out-in">
    <router-view />
</transition>

 

 router.js:适用后台管理（头部底部固定 左侧菜单 右侧内容点击）