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 对象的创建与使用
Mar 09 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
js实现图片轮播效果
Dec 19 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
微信小程序实现列表左右滑动
Nov 19 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python ldap实现登录实例代码
2016/09/30 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
厨师岗位职责
2013/11/12 职场文书
车辆安全检查制度
2014/01/12 职场文书
经理助理岗位职责
2014/03/05 职场文书
师德师风承诺书
2014/05/23 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
机电专业求职信
2014/06/14 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
高中团支书竞选稿
2015/11/21 职场文书
导游词之镇江焦山
2019/11/21 职场文书