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

一、路由懒加载

当打包构建应用时,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')
相关推荐
-指短琴长-1 小时前
CGroups资源控制实战【Linux】
linux·运维·服务器
码农hbk2 小时前
xv6 源码精读(二)开启MMU、一致性映射页表
linux·服务器
雪碧聊技术2 小时前
Linux命令过关挑战
linux·运维·数据库
GoodTimeGGB2 小时前
轻量服务器Lighthouse + 1Panel + Halo,三步打造你的专属网站
服务器·1panel·lighthouse·建站·halo
ayaya_mana2 小时前
CentOS 7 安装指定内核版本与切换内核版本
linux·运维·centos
你什么冠军?3 小时前
云计算与服务器概述
运维·服务器·云计算
UNbuff_03 小时前
Linux top 命令使用说明
linux·运维·服务器
YC运维3 小时前
Jenkins 安装,自动化全方位详解文档
运维·自动化·jenkins
半梦半醒*3 小时前
Jenkins流水线项目发布
运维·ci/cd·tomcat·jenkins·maven·运维开发
塔能物联运维4 小时前
物联网运维中的自适应网络拓扑重构技术
运维·物联网·重构