vue踩坑日记之params传递参数问题
作者:闪电松鼠~ 时间:2024-05-10 14:19:48
vue踩坑之params传递参数
1.我们都知道 vue中 params传递参数都需要配置占位符 。
2.但是 一定要注意, 重点来了:
如果 /search的占位符没有值的时候, 也就是没有传递params参数时, 是无法跳转到 search组件的,路径会重新定位到 跟组件 /
3. vue 报错
vue-router] missing param for named route "search": Expected "keyword" to be defined
4. 解决方式
在路径的占位符后面添加 一个 ? , 代表 这个params参数可以传递,也可以不传递。
使用params方式传参数据丢失
在vue的组件之间传递数据时,因为不想url上面有?xx=yy的内容出现,所以选择params形式传递参数,正常跳转,好看又方便
问题出现了:突然在刷新跳转之后的页面的时候,页面的数据加载不出来了,仔细一看,原来是路由中携带的参数不见了!! 组件刷新还能导致路由的参数丢失。
Vue-router传递参数的方式说明
query传递参数
query传递参数不会出现路参数丢失的情况,所以不需要做其他的配置,不过缺点就是参数会拼接在url后面: url?xx=yy 这种方式来传递参数,会暴露参数,并且url也有字符上限限制
使用方式:
this.$router.push({path: 'path', query: {id:1}})
获取参数:
this.$route.query.id获取key为id的路由参数
params传递参数
params传递参数是将参数放在route对象中,没有放在url后面,但是会有一个问题,在跳转之后的页面中刷新的时候,会导致当前路由中保存的params的参数丢失
使用方式:
this.$router.push({name: 'name', params:{id:1}})
获取参数:
this.$route.params.id 获取route对象中的Params的参数信息
解决使用params传递参数刷新页面参数丢失
使用params传递参数,参数没有像query那样,拼接在url后面,所以刷新的时候会出现数据丢失,则无法获取到数据
有两种方式可以解决:
1.使用sessionStorage、localStorage
sessionStorage、localStorage根据具体的场景来选择,保存到里面的数据不会在刷新下的时候丢失,不过在移动端,使用微信悬浮窗的时候,部分安卓机型的sessionStorage中的数据会丢失
2.使用params中的路由匹配
使用方式: 在router.js,即匹配路由规则的位置,加上占位符即可
{
? path: '/index/:num/:name',
? name: 'index',
? component: Index
}
params中的参数名称需要和占位符的名称一致即可
获取参数,还是和获取params中参数一致:this.$route.params.name
这样的话,参数就会出现在url中,格式为:url/num/name,这种方式将参数放在url上,刷新的时候才不会丢失数据。
来源:https://blog.csdn.net/Dzb1993/article/details/123141865
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
pycharm解决关闭flask后依旧可以访问服务的问题
![](https://img.aspxhome.com/file/2023/7/67747_0s.jpg)
aspjpeg组件asp代码实例使用详解
Vue实现导航栏菜单
![](https://img.aspxhome.com/file/2023/1/126481_0s.jpg)
js实现九宫格抽奖
Django logging配置及使用详解
Mysql远程访问的开启
python匹配两个短语之间的字符实例
收集的ORACLE函数大全
mysql语句实现简单的增、删、改、查操作示例
Python实现在线音乐播放器
![](https://img.aspxhome.com/file/2023/3/79683_0s.jpg)
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
![](https://img.aspxhome.com/file/2023/6/91896_0s.jpg)
python imutils包基本概念及使用
![](https://img.aspxhome.com/file/2023/6/131256_0s.png)
python自定义函数实现最大值的输出方法
vue中插件和组件的区别点及用法总结
教你如何升级SQL Server数据库系统
深入理解Python中变量赋值的问题
关于pytest结合csv模块实现csv格式的数据驱动问题
Python 中 f-Strings 的作用
![](https://img.aspxhome.com/file/2023/3/81803_0s.jpg)
golang进程内存控制避免docker内oom
![](https://img.aspxhome.com/file/2023/6/127336_0s.png)
浅谈pytorch中torch.max和F.softmax函数的维度解释
![](https://img.aspxhome.com/file/2023/2/65882_0s.jpg)