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

一、路由懒加载

当打包构建应用时,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')
相关推荐
LH_R3 小时前
OneTerm开源堡垒机实战(四):访问授权与安全管控
运维·后端·安全
Raymond运维3 小时前
MariaDB源码编译安装(二)
运维·数据库·mariadb
JuiceFS20 小时前
从 MLPerf Storage v2.0 看 AI 训练中的存储性能与扩展能力
运维·后端
chen9451 天前
mysql 3节点mgr集群部署
运维·后端
LH_R1 天前
OneTerm开源堡垒机实战(三):功能扩展与效率提升
运维·后端·安全
dessler1 天前
Hadoop HDFS-高可用集群部署
linux·运维·hdfs
少妇的美梦2 天前
logstash教程
运维
chen9452 天前
k8s集群部署vector日志采集器
运维
chen9452 天前
aws ec2部署harbor,使用s3存储
运维
christine-rr2 天前
linux常用命令(4)——压缩命令
linux·服务器·redis