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

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


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

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


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

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

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


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

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

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

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

相关推荐
小李子呢021128 分钟前
前端八股网络浏览器---输入 URL 到页面呈现
前端·网络
Hello--_--World39 分钟前
Vue:虚拟Dom
前端·javascript·vue.js
vivo互联网技术1 小时前
下一代图片格式 AVIF 在 vivo 社区的落地实践
前端·性能优化·图片压缩·avif
咸鱼翻身更入味1 小时前
Vue创建一个简单的Agent聊天
前端
bluetata1 小时前
AI 浪潮与破局:TypeScript 生态实战,让 AI 为你所用
javascript·人工智能·typescript
布局呆星1 小时前
Vue Router 核心知识点梳理
前端·javascript·vue.js
得物技术2 小时前
基于 Harness + SDD + 多仓管理模式的 AI 全栈开发实践|得物技术
前端·人工智能·后端
不会写DN2 小时前
如何通过 Python 实现招聘平台自动投递
开发语言·前端·python
JiaWen技术圈2 小时前
增量静态再生(ISR)详解:Next.js 中的实现与应用
javascript·git·ubuntu