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

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


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

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


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

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

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


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

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

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

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

相关推荐
摸鱼的春哥27 分钟前
春哥的Agent通关秘籍13:实现RAG查询
前端·javascript·后端
明月_清风33 分钟前
滚动锁定:用户向上翻看历史时,如何阻止 AI 新消息把它“顶”下去?
前端·javascript
明月_清风34 分钟前
当高阶函数遇到 AI:如何自动化生成业务层面的逻辑拦截器
前端·javascript·函数式编程
moshuying11 小时前
别让AI焦虑,偷走你本该有的底气
前端·人工智能
GIS之路12 小时前
ArcPy,一个基于 Python 的 GIS 开发库简介
前端
可夫小子13 小时前
OpenClaw基础-为什么会有两个端口
前端
喝拿铁写前端13 小时前
Dify 构建 FE 工作流:前端团队可复用 AI 工作流实战
前端·人工智能
喝咖啡的女孩14 小时前
React 合成事件系统
前端
从文处安14 小时前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
前端Hardy14 小时前
面试官:JS数组的常用方法有哪些?这篇总结让你面试稳了!
javascript·面试