Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/项目笔记/小兔鲜

小兔鲜二级分类页

2 分钟阅读 · Note

目录树 578 篇

          • 登录页
          • 购物车
          • 结算页
          • 小兔鲜二级分类页
          • 小兔鲜详情页
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗登录页同一路径↗购物车同一路径↗结算页同一路径↗小兔鲜详情页同一路径↗「Feature」Introduce Crate as an independent metadata entity[ˈentəti] | 引入 Crate 作为独立元数据实体共同主题↗表单数据获取&提交需要loading共同主题

激活样式显示

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


路由缓存

响应路由参数的变化

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

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

![Pasted image 20250730204507](../../../_assets/2e37352-Pasted image 20250730204507.png) 但过于粗暴,会将整个组件全部销毁重建。。。

![Pasted image 20250730204755](../../../_assets/315d43e-Pasted image 20250730204755.png)


使用逻辑函数拆分

![Pasted image 20250730210030](../../../_assets/45c611d-Pasted image 20250730210030.png)

无限加载与列表切换

![Pasted image 20250730223956](../../../_assets/2255b8b-Pasted image 20250730223956.png) 使用Element Plus来实现(这比我用原生的也快太多了。。。)


定制路由行为

![Pasted image 20250730224128](../../../_assets/f5864d5-Pasted image 20250730224128.png) 在多页面应用这种问题就不会存在。