若依 | 点击顶部 tag 标签不自动刷新

• 2022 年 8 月 18 日
• 笔记
• RuoYi框架, VUE, Vue深度掌握

需求场景

之前：只要点击若依顶部的标签，页面都会自动刷新。

问题：A 页面有查询结果，切换到 B 页面查看信息，再切回 A 页面，则 A 页面的查询结果不会保留。

需求：点击标签，页面不自动刷新，或者保留查询结果。

尝试

方案一

翻了下点击标签的源码，发现：它是 <router-link> 标签。路由跳转到目标地址后，会自动刷新页面。如果每次进入页面时，都设置导航守卫，根据 Vuex 查询该页面上一次是否有查询结果，若有，则不刷新页面，反之刷新。

这种操作对性能消耗较大，不推荐。

方案二：推荐

在搜索攻略时，发现 keep-alive 就是为此而生的 —— 若页面内容没有改变，就不刷新，保留缓存；反之刷新。

若依源码也使用到了它：

因此，问题很容易解决了：

只要在若依的菜单管理页面配置时，点击 缓存，并且确保组件 name 和 组件的路由地址一致（这一点非常重要！！！）

如果组件名称是多个单词构成的呢？

路由地址必须写为 camel 驼峰命名形式，组件名称必须写为 pascal首字母全大写的形式。

注意

组件名称不建议用小写形式，这样容易与 HTML 的标签名重复，会报错，且缓存也不会生效。比如：

如果是自己在 router.js 中定义的路由，不是在菜单管理页面配置的路由，怎样实现缓存呢？

很奇怪的一点是：这里的 path 没有写为驼峰形式 projectLibrary，但仍然可以实现缓存

如果在菜单管理页面配置路由的地址写为 kabab 形式，比如 project-library，就无法缓存。

如果想不缓存，在 meta 中设置 noCache: true 即可

总结

若依中实现页面缓存：

• 菜单页面配置的路由

  1. 是否缓存-勾选是；
  2. 路由地址书写为驼峰形式（比如：propertyList , figure），路由页面中 export default 导出的 name 书写为 pascal首字母全大写的形式（比如：PropertyList , Figure）。

• 手动在 router.js 中书写的路由

  1. 确保路由名称 name 和 路由页面中 export default 导出的 name一样，都是pascal首字母全大写的形式（比如：PropertyList , Figure）；
  2. path 可写为 kabab 形式，比如 project-library；
  3. 若不想缓存，则在 meta 中设置 noCache: true。