vue路由传参页面刷新参数丢失问题解决方案


Posted in Javascript onOctober 08, 2019

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

方法一:params传参:

this.$router.push({
    name:"admin",

//这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取)
    params:{id:item.id}
})    

//这个组件对应的路由配置
{

//组件路径
  path: '/admin',

//组件别名
  name: 'admin',

//组件名
  component: Admin,
}

通过params传递参数,如果我们想获取id的 参数值,我们可以通过this.$route.params.id这种方式来打印出来就可以得到了;(注意:获取参数的时候是$route,跳转和传参的时候是$router)

方法二:路由属性配置传参:

this.$router.push({
    name:"/admin/${item.id}",
})    

//这个组件对应的路由配置
{
//组件路径
  path: '/admin:id',

//组件别名
  name: 'admin',

//组件名
  component: Admin,
}

通过路由属性配置传参我们可以用this.$route.params.id来获取到id的值,注意this.$router.push方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应;

以上两种传参方式基本上可以理解为ajax中的post请求方式,参数都是不可见的,但是上面两种方法都有一个弊端,就是当页面刷新了是获取不到参数值的,那么有没有一种方法是页面刷新之后参数依然存在呢?

方法三:query传参

this.$router.push({
    name:"/admin",

 query:{id:item.id}
})    
//这个组件对应的路由配置
{

//组件路径
  path: '/admin',

//组件别名
  name: 'admin',

//组件名
  component: Admin,
}

第三种方式是用query来传参,这种方式是可以解决页面刷新参数消失问题的,这种方式可以理解为是ajax中的get方法,参数是直接在url后面添加的,参数是可见的,所以解决页面刷新参数消失问题建议使用方法三来解决;

其实解决页面刷新参数丢失问题的方案还有很多,比如把参数存在sessionStorange或者localStorange中都是可行的,不过我们既然用vue框架,就要用vue的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
JavaScript 作用域实例分析
Oct 02 #Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 #Javascript
JavaScript 面向对象基础简单示例
Oct 02 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python 多线程串行和并行的实例
2019/02/22 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python中类与对象之间的关系详解
2020/12/16 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
婚宴邀请函
2015/01/30 职场文书
病假条格式范文
2015/08/17 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
公司晚会主持词
2019/04/17 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫