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

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


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

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


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

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

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


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

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

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

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

相关推荐
Sylvia33.4 分钟前
网球/羽毛球数据API:专业赛事数据服务的技术实现
java·前端·websocket·json
i_am_a_div_日积月累_4 分钟前
el-drawer注册全局点击事件无效;el-dialog注册全局点击事件无效
javascript·vue.js·elementui
啥都不懂的小小白22 分钟前
Vue第四篇:组件通信 + DOM 更新 + 过渡动画
vue.js·全局事件通信
向下的大树25 分钟前
VUE父子组件传参中的触发时机问题:异步场景下的解决方案
前端·javascript·vue.js
英俊潇洒美少年26 分钟前
vue2中使用节流防抖函数时,使用的vue状态始终是初始化的数据
前端·javascript·vue.js
棒棒的唐40 分钟前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序
刘一说1 小时前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构
博客zhu虎康1 小时前
音频视频处理:前端直播流播放 flv
前端
一位搞嵌入式的 genius1 小时前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
董世昌411 小时前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript