在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现。而params传参分为两种情况:

1.参数在url中显示

首先你要确定自己要传的参数,并在控制路由的文件中的Router中path内添加对应的字段如:

{
  path:'/paramsUrl/:name/:age/:sex',
  component:paramsUrl
}

我要传的参数是姓名,年龄以及性别。

在你要跳转的组件内定义参数,如:

stu:{name:'Tom',age:18,sex:'male'}

同时在HTML中引入它们,通过router-link跳转(也可以通过点击事件,push()跳转),插入对应的字段。注意:如果参数个数不同,将不会出现预期效果!

<router-link :to="{path:'/paramsUrl/'+stu.name+'/'+stu.age+'/'+stu.sex}"><button>goto paramsUrl</button></router-link>

当然,你也可以通过this.$route.params.name来获取参数

2.通过name避免在url显示

通过上面的介绍,相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数,将会出现我们不想看到的问题。那么如何避免呢?---name

上边对Router中的操作只是改了 path,现在我们在添加一个name参数。

{
  path: '/param',
name: 'param',
component: param
},

这里我们通过点击事件进行跳转~

<button @click="goParam">go to param</button>

在methods中编写方法

goParam:function(){
this.$router.push({name:'param',params:this.stu})
}

我还是比较喜欢第二种方法,不仅安全而且不用编写相对应的参数,想传什么直接在data中添加即可。

读取参数的方法同上~

Vue:不同页面之间的传递参数--params的更多相关文章

  1. Vue:不同页面之间的传递参数(二)---query

    1) 在router文件下的index.js中,添加相关路径 routes: [ { path: '/', name: 'Hello', component: HelloWorld }, { path ...

  2. js两个页面之间URL传递参数中文乱码

  3. jsp页面之间传中文参数显示乱码问题的解决

    最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...

  4. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  5. 转载如何实现portlet之间的传递参数

    Liferay 6开发学习(三十):跨页面Portlet之间的调用与数据传递 2014年10月09日 Liferay 评论 2 条 阅读 4,209 views 次 Portlet之间的通信方法有多种 ...

  6. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  7. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  8. ASP.NET MVC 页面调整并传递参数

    转自:http://blog.csdn.net/zhensoft163/article/details/7174661 使用过ASP.NET MVC的人都知道在MVC中页面后台中常用的页面跳转方法有几 ...

  9. angular 1.x 控制器之间互相传递参数

    我们要向前方看齐,基于js引用类型的对象就不记了,所以使用基于事件的方式: angular 中 $on,$emit,$boardcast来实现父控制器和子控制器互相通讯, 其中$on表示事件监听, $ ...

随机推荐

  1. 校验正确获取对象或者数组的属性方法(babel-plugin-idx/_.get)

    背景: 开发中经常遇到取值属性的时候,需要校验数值的有效性. 例如: 获取props对象里面的friends属性 props.user && props.user.friends &a ...

  2. Error: 'The service did not respond in a timely fashion'

    Windows启动时候报这个错,不应在OnStart放执行长的过程,需要开另一个线程来做才能顺利启动 Windows Services: OnStart loop - do I need to del ...

  3. Call JMS Web Service

    The content type application/json of the response message does not match the content type of the bin ...

  4. [Luogu] 子串

    https://www.luogu.org/problemnew/show/P2679 DP f(k,i,j)f(k,i,j)表示分了k段,用了第一个串中的前i个数字,已经构成了第二个串的前j个的方案 ...

  5. jQuery的$符号

    jQuery使用$的原因是: 书写简洁, 相对于其他字符与众不同, 容易被记住. JQuery占用了两个变量: $ 和 jQuery. 当在代码中打印 $ 和 jQuery时: <script ...

  6. 图书管理(单链表C++)

    #include<iostream> #include<string> #include<iomanip> #include<fstream> usin ...

  7. LeetCode347——优先队列解决查询前k高频率数字问题

    给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 例如, 给定数组 [1,1,1,2,2,3] , 和 k = 2,返回 [1,2]. 注意: 你可以假设给定的 k 总是合理的,1 ≤ k ...

  8. python Telnet通讯

    摘要: python中telnetlib模块的使用: http://blog.csdn.net/five3/article/details/8099997 python实现telnet: http:/ ...

  9. spark MLlib的 pipeline方式

    spark mllib的pipeline,是指将多个机器学习的算法串联到一个工作链中,依次执行各种算法. 在Pipeline中的每个算法被称为"PipelineStage",表示其 ...

  10. MySQL 的连接时长控制--interactive_timeout和wait_timeout

    在用MySQL客户端对数据库进行操作时,如果一段时间没有操作,再次操作时,常常会报如下错误: ERROR 2013 (HY000): Lost connection to MySQL server d ...