第二十三节——路由懒加载+动态路由

一、路由懒加载

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

🤔 其实我们一直用的就是路由懒加载

复制代码
// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

二、动态路由(先跳过,结合项目讲)🚀🚀

对路由的添加通常是通过 routes 选项来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。动态路由主要通过两个函数实现。router.addRoute() 和router.removeRoute()。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push() 或 router.replace() 来手动导航,才能显示该新路由

1、添加路由

复制代码
/**
 * 接收一个参数是路由对象
 */
router.addRoute({ path: "/about", component: About });

/**
 * 添加嵌套路由
 * 第一个参数是父级路由的name
 * 第二个参数 是路由对象
 */
router.addRoute("父级路由Name", { path: "/about", component: About });

2、删除路由

复制代码
// 传入要删除路由的name
router.removeRoute('about')
相关推荐
华普微HOPERF4 小时前
Matter协议,如何塑造更宜居、流畅的智能家居网络?
服务器·网络·智能家居
初学者_xuan4 小时前
零基础新手小白快速了解掌握服务集群与自动化运维(十五)Redis模块-Redis数据库基础
运维·数据库·自动化
小志biubiu5 小时前
【Linux】Ext系列文件系统
linux·服务器·c语言·经验分享·笔记·ubuntu·操作系统
DooTask官方号5 小时前
DooTask 1.3.38 版本更新:MCP 服务器与 AI 工具深度融合,开启任务管理新体验
运维·服务器·人工智能·开源软件·dootask
wanhengidc7 小时前
云手机适配用户有哪些?
服务器·arm开发·安全·智能手机·玩游戏
阿Y加油吧8 小时前
Docker从入门到实战——含容器部署、docker基础、项目部署
运维·docker·容器
st7802069 小时前
Debian 13.1 下编译Openwrt24
运维·debian·openwrt
Wang's Blog9 小时前
Linux小课堂: NGINX反向代理服务器配置与实践
linux·运维·nginx
运维行者_10 小时前
运维实战:SSL 证书故障避坑指南(精简版)
运维·网络协议·ssl
AI扶我青云志10 小时前
AGENT 和自动化工作流的区別
运维·自动化