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

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


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

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


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

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

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


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

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

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

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

相关推荐
学以智用2 分钟前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字5 分钟前
AI 开发必懂:Context Window(上下文窗口)到底是什么?
前端·人工智能·后端
Mr_Swilder7 分钟前
intel显卡本地部署大模型
前端
yuki_uix7 分钟前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
over69710 分钟前
📸《拍照记单词》—— 从零到上线的完整开发指南(超详细版)
前端·人工智能·产品
毛骗导演11 分钟前
万字解析 OpenClaw 源码架构-架构概览
前端·架构
天才熊猫君19 分钟前
Flex布局深度解析:为什么我的Flex项目不按预期收缩?
前端
风雪心20 分钟前
Antd组件库Form的onValuesChange和getFieldsValue的调用时机分析
前端
Moment21 分钟前
2026 趋势预测:Vibe Coding 之后,人人都会拥有专属 Agent 吗?
前端·javascript·后端
前端Hardy36 分钟前
Bun 1.0 正式发布:JavaScript 运行时的新王者?启动快 5 倍,打包小 90%!
前端·javascript·面试