vue路由传参那些事

简介: vue路由传参那些事

1.pngvue路由传参


为什么要使用vue传参


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


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

router-link 页面式跳转传参

1.png


使用路由导航传递参数,这里的to为动态组件,实现路由导航的可动性,这里的site是需要传递的参数

2.png

这里需要使用到v-for循环遍历出sites中的site


3.png

子组件中使用Route.params.direction来接收传递的参数

这里页面渲染出来了各个方向的数据

在路由配置文件中:

4.png

在url地址栏中显示出来了参数:

5.png

同时我们需要解决路由url改变但是页面渲染的内容并未改变的问题,需要我们去进行watch监听路由

6.png

监听路由后则页面会随着路由的变化随之变化.


相关文章
|
1天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
1天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
8 0
|
1天前
|
JavaScript
vue知识点
vue知识点
10 0
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
990 0
|
2天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
2天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
5 0
|
2天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
2天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化