Skip to content

激活样式显示

使用RouterLink自带的active-class:来实现功能。 [官方文档](接口:RouterLinkProps | Vue Router)


路由缓存

响应路由参数的变化

使用带有参数的路由时需要注意的是,当用户从 /users/johnny 导航到 /users/jolyne 时,相同的组件实例将被==重复使用==。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用

要对同一个组件中参数的变化做出响应的话,你可以简单地 watch $route 对象上的任意属性 [官方文档](带参数的动态路由匹配 | Vue Router)

Pasted image 20250730204507.png 但过于粗暴,会将整个组件全部销毁重建。。。

Pasted image 20250730204755.png


使用逻辑函数拆分

Pasted image 20250730210030.png

无限加载与列表切换

Pasted image 20250730223956.png 使用Element Plus来实现(这比我用原生的也快太多了。。。)


定制路由行为

Pasted image 20250730224128.png 在多页面应用这种问题就不会存在。