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

一、路由懒加载

当打包构建应用时,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')
相关推荐
Yuki’14 分钟前
网络编程---TCP
服务器·网络·tcp/ip
禁默21 分钟前
已知 inode 号,如何操作文件?Ext 文件系统增删查改底层逻辑拆解
linux·服务器·数据库
IT利刃出鞘26 分钟前
Docker--宿主机和容器相互拷贝文件
运维·docker·容器
云飞云共享云桌面29 分钟前
工厂办公环境如何实现一台服务器多人共享办公
运维·服务器·网络·数据库·3d
路上阡陌1 小时前
ELK 部署
运维·elk·jenkins
zr5268554471 小时前
ModbusTCP 转 Profinet 主站网关
运维·服务器·网络
青岛佰优联创新科技有限公司1 小时前
服务器托管,服务器运维的选择
运维·服务器
NiKo_W2 小时前
Linux 初识
linux·运维·服务器
FrozenLove_G3 小时前
服务器内存和普通计算机内存在技术方面有什么区别?
服务器·常识
江团1io06 小时前
深入解析TCP核心机制:连接管理、流量与拥塞控制
服务器·网络·tcp/ip