vue-router 前端路由之路由传值的方式详解


Posted in Javascript onApril 30, 2019

路由传值

在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢?

普通跨页面传值:

1.通过localStorage

setItem()
getItem()

2.通过search(地址栏 ? 后面的参数)

VueRouter的路由传值

VueRouter的路由传值有两种方式

jquery传值。 类似get传值

传值的路由

this.$router.push({
  path: "/login?uname=" + this.userName
});

传值路由第二种写法

this.$router.push({
  path: "/login",
  query: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收过来的值为:" + this.$route.query.uname);        //这里是$route 没有r
----

params传值 。路径变量传值

params路由传值可以把它理解成express路径变量传值 ,它也可以放在地址栏里面进行传递

传值路由第一种写法(还是会将参数显示在地址栏中)

this.$router.push({
  path: "/login/" + this.userName
});

传值路由的第二种写法(不会将参数显示在地址栏中)

this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收过来的值为:" + this.$route.params.uname);

注意:在使用params传递参数的时候,我们需要在router的对象里面,找到当前的这个路由,然后去更改它的 path

{
   path: "/login/:uname", //代表当前url跳转的路径
   component: login, //代表在当前这个路径下面,我们如何显示组件(显示那一个组件)
   name: "login" //给当前路由取一个别名
 }

上面的path后面是 /login/:uname ,这一个是我们的一个路径变量,前面的login代表路由,而后面 :uname 代表的是变量

---

通过第二种方式的params传值 ,引伸出post原理传值

params本身确实是会把参数添加到url地址栏,但是,我们可以让它不显示出来,使用下面的方法,我们就可以把它去掉,不显示,从而内容不经过浏览器地址栏处理,直接做到传值。

它只是把路由对象里面的路径变量给去掉了,直接使用的params传值

注意事项:因为它把path里面的路径变量去掉了,所以不能使用path去传递值了

this.$router.push({
  path: "/login/" + this.userName
});
//现在上面的方法就不可用了,而必须使用下面的方法
this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

这一个就是vue当中变相去处理post传值

总结

以上所述是小编给大家介绍的vue-router 前端路由之路由传值的方式详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
js数组操作学习总结
Nov 04 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 #Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 #Javascript
微信小程序常用赋值方法小结
Apr 30 #Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 #Javascript
一百行JS代码实现一个校验工具
Apr 30 #Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 #Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 #Javascript
You might like
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHPMailer发送邮件
2016/12/28 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python如何删除文件、目录
2020/06/23 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
幼儿园中班下学期评语
2014/04/18 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
追悼词范文大全
2015/06/23 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python