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

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


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

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


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

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

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


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

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

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

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

相关推荐
打妖妖灵滴哪吒29 分钟前
IOS模态窗口的作用与设计原则
前端·ui
午安~婉38 分钟前
挑战二:博客预览卡片
前端·javascript·html
环境栈笔记1 小时前
指纹浏览器安全评测方法:核对环境、数据与权限后再选型
前端·人工智能·后端·自动化
打妖妖灵滴哪吒1 小时前
前端开发/UI设计师-APP中如何进行可发现性设计
前端·ui
Kinghiee1 小时前
从使用场景切入前端常见设计模式
前端·设计模式
郭老二11 小时前
【前端】vue3:编译步骤
前端
不在逃避q11 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁12 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One98512 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易12 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员