// 记录需缓存的路由/组件constkeepAliveViews=[];router.getRoutes().forEach((routeItem)=>{if(routeItem?.meta?.keepAlive){// 组件name和路由name保持一致, 所以可以直接使用routeItem.name// 也可以在 meta 中添加属性 compName 来用,或其他方案keepAliveViews.push(routeItem.name);}});store.commit(...
VueRouter4可以实现页面之间的路由跳转,并且能够支持路由懒加载、动态路由、嵌套路由等功能。VueRouter4的主要特点响应式与声明式:VueRouter4允许你用声明式的方式来配置路由,这使得路由管理更加直观和易于理解。 嵌套路由:支持在一个组件内部定义子路由,使得路由结构更加灵活和模块化。 组件懒加载:通过动态导入组件,实现...
解决报错问题,发现刷新空白,经查看报错提示及查看了缓存的有权限的路由发现,缓存中是不存在路由组件关联的,因此这里我们需要手动将视图组件导入并关联,需要在添加如下代码: // ./src/router/extend.ts 新增如下代码:/** * 动态添加路由当缓存时只会存储其路由清单树,不会存储其关联的视图组件 * 故而当重新刷新或...
需要先在路由配置中使用 :＋参数名 来配置参数 当使用path时，params属性会被忽略，所以要么使用name属性，或者自己拼接url；当需要一些信息附加到路由上时，可以通过配置路由元信息来实现，比如是否需要登录才能访问，设置页面切换过渡效果，是否要缓存该页面…单独配置元信息不会起到任何作用，还需要写相应的代码来达成...
meta官网的文档叫做路由元数据,我们可以把它理解为关于路由的额外信息,它是一个对象,里面的内容随我们写什么都行,我这里写了两个可能会用到的 title表示我们这个页面的名称, keepAlive表示这个页面要不要缓存,缓存页面在深入学习中肯定会遇到的 虽然现在这节课增加的这些信息现在没什么用,大家还是一定要了解name和met...
强大的API:VueRouter4提供了丰富的API,支持各种复杂的路由需求,如动态路由、路由守卫等。 性能优化:VueRouter4利用惰性加载和缓存技术,提升了应用的加载速度。 安装与初始化VueRouter4 要使用VueRouter4,首先需要安装它。可以通过以下命令安装: npm install vue-router@next ...
1、懒加载路由：使用懒加载路由可以在需要时异步加载组件并分块打包，从而避免一次性加载所有组件，优化页面加载速度。2、合理划分路由：根据业务需求合理划分路由，避免无限制的添加子路由，尤其是对于大型项目而言。3、缓存组件：对于那些不经常发生变化的组件，应该启用缓存策略以避免重复渲染。4、使用动态...
1. 路由的监听原理: 1.1 URL的hash(通过改变URL的hash值,让页面不发生刷新) URL的hash也就是锚点(#), 本质上是改变window.location的href属性 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新; hash的优势就是兼容性更好,在老版IE中都可以运行,但是缺陷是有一个#,显得不像一个真实的路径 ...
创建vue router的history对象,包含4个属性:location(当前location)、state(路由页面的history state)、和push、replace2个方法; 创建vue router监听器:主要支持路由跳转时的state处理和自定义的跳转逻辑回调; 添加location劫持,当routerHistory.location变动时返回标准化的路径; ...
第九章——路由元信息路由元信息通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据,例如:权限校验标识。 路由组件的过渡名称。 路由组件持久化缓存 (keep-alive) 的相关配置。 标题名称有时我们想将一些信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收...