vue3前端开发-小兔鲜项目-一级分类的路由设置

vue3前端开发-小兔鲜项目-一级分类的路由设置!之前的代码,我们没有做一级分类的路由设置,所以点击是默认停留在原始页面了,不会发生跳转。今天我们把路由设置好,让它实现动态路由跳转到一级分类页面去的效果。


1:第一步,我们提前 准备好一级分类的模块组件。

如图,在视图里面,下面,有category文件夹,里面我们已经创建好了一个简单的模板,index.vue,这是一个根组件,未来,这里面还会有很多子组件(展示各种不同的信息,不同的信息,有对应各自的子组件来完成承载。)


2:第二步,我们去修改一下路由的配置信息。

如图,我们在这个路径后面加上一个动态的参数,id

这样可以把接收过来的分量id,属性值绑定到了我们的路径里面去了。


3:然后,我们去修改一下,图层模板组件内的情况。

如图,一定要记住,动态渲染,前面少不了那个:冒号,别忘了。

还需要修改一个地方,固定在顶层位置的组件内也有这个代码块。

如图所示,这个也得改成动态渲染的,这样就可以实现参数id渲染进入路径了。

相关推荐
用户575730334624几秒前
深入 JavaScript 内存机制:从栈与堆到闭包的底层原理
javascript
阿诺木2 分钟前
Node.js 局域网设备发现:mDNS、UDP 广播和子网扫描
前端
盐焗乳鸽还要砂锅2 分钟前
亲手造一只有灵魂的 AI 小龙虾是种什么体验?
前端·llm·agent
YimWu4 分钟前
Opencode 核心设计-Session会话机制
前端·agent·ai编程
Mintopia7 分钟前
诗词如何影响人:从认知机制到可落地的文本分析技术路线
前端·代码规范
WaywardOne12 分钟前
iOS必看!Deepseek给的Runtime实现原理,通俗易懂~
前端·面试
小码哥_常16 分钟前
惊!Kotlin集合,你可能只用了40%?
前端
Wect22 分钟前
LeetCode 52. N 皇后 II:回溯算法高效求解
前端·算法·typescript
毛骗导演23 分钟前
万字解析 OpenClaw 源码架构-跨平台应用之 iOS 应用
前端·ios·架构
刀断青23 分钟前
Flutter 开发之第一个Flutter应用
前端