vue路由传参
为什么要使用vue传参
在写vue项目时大多数情况下会遇到动态路由问题,如果要求五个数据要用五个路由页面渲染出来,我们不可能去写五个路由页面,这时候我们就可以使用路由传参来实现动态路由,自动生成五个路由。
vue传参主要的主要方式(以下内容为vue3中使用)
router-link 页面式跳转传参
使用路由导航传递参数,这里的to为动态组件,实现路由导航的可动性,这里的site是需要传递的参数
这里需要使用到v-for循环遍历出sites中的site
子组件中使用Route.params.direction来接收传递的参数
这里页面渲染出来了各个方向的数据
在路由配置文件中:
在url地址栏中显示出来了参数:
同时我们需要解决路由url改变但是页面渲染的内容并未改变的问题,需要我们去进行watch监听路由
监听路由后则页面会随着路由的变化随之变化.