0
点赞
收藏
分享

微信扫一扫

vue路由传参那些事

船长_Kevin 2022-02-05 阅读 106

vue路由传参

为什么要使用vue传参

在写vue项目时大多数情况下会遇到动态路由问题,如果要求五个数据要用五个路由页面渲染出来,我们不可能去写五个路由页面,这时候我们就可以使用路由传参来实现动态路由,自动生成五个路由。

vue传参主要的主要方式(以下内容为vue3中使用)

router-link 页面式跳转传参

在这里插入图片描述

使用路由导航传递参数,这里的to为动态组件,实现路由导航的可动性,这里的site是需要传递的参数
在这里插入图片描述
这里需要使用到v-for循环遍历出sites中的site

在这里插入图片描述
子组件中使用Route.params.direction来接收传递的参数
这里页面渲染出来了各个方向的数据
在路由配置文件中:
在这里插入图片描述
在url地址栏中显示出来了参数:
在这里插入图片描述
同时我们需要解决路由url改变但是页面渲染的内容并未改变的问题,需要我们去进行watch监听路由
在这里插入图片描述
监听路由后则页面会随着路由的变化随之变化.

举报

相关推荐

0 条评论