Vue:不同页面之间的传递参数--params

在嵌套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中添加即可。

读取参数的方法同上~

时间: 2024-09-29 23:13:35

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

页面之间值传递常用的几种方式

1.QuerySting在页面间传递值 这种方法的写法:在要传递值的页面,Response.Redirect(url),值包含在在url中.接收值得页面,Request.QueryString["变量名"]. 这是使用起来很简单的一种方式,但是它不是很安全,因为值会在浏览器里的地址栏里显示.并且它也不能传递对象,对长度也有限制,如果要传递的值很多,且对安全要求也高的话,这种方式就不适合了. 2.Session变量 我们通常在一个页面中,将值放到session变量中,在另外几个页面使用它

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

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

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

Liferay 6开发学习(三十):跨页面Portlet之间的调用与数据传递 2014年10月09日 Liferay 评论 2 条 阅读 4,209 views 次 Portlet之间的通信方法有多种,比如PortletSession,Public Render Parameter,Portlet event等.但是这些方法使用起来都很复杂,像Public Render Parameter和event等,在跨页上就力所不及. 在很多时候我们要想实现Portlet之间的参数传递和数据共享,我最常用

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

转自:http://blog.csdn.net/zhensoft163/article/details/7174661 使用过ASP.NET MVC的人都知道在MVC中页面后台中常用的页面跳转方法有几种,如:return View().return RedirectToAction() 一般情况下我们返回的都是本页面,所以使用return View()就可以解决问题了,但是很多时候我们也会遇到返回的页面不是本页面的,那么就会用到后面两种,但是如果我们在页面返回的时候也要返回操作的结果的时候,我们

页面之间如何传递特殊字符

最近在做页面传值时,遇到了一个问题,问题还原: 第一个页面使用数据源控件DataBindControl绑定数据源,然后使用HyperLinkField控件绑定后台数据,并且传递参数到第二个页面.数据绑定代码如下: <span style="font-size:18px;"><SOA:DeluxeObjectDataSourcerunat="server" EnablePaging="True"ID="DataSourc

jsp页面跳转传递参数/抓取参数

1.通过url路径传递参数 var name='job'; var age=18; window.open($.WEB_ROOT+ '/nihao/search/infomation.jsp?name='+name+'&age='+age); jsp中页面抓取 <script type="text/javascript"> $(function() {  var name= '<%=request.getParameter("name")%

0428日重点:页面之间通过url参数的方法传递变量

1.一个页面里的变量,要传递给另一个页面,可通过把变量作为网址的url参数的方法传递,在另一个页面(接收页面)里,先获取到属性,然后放在隐藏的input里,然后表单提交! 1.传递页面的url里,把变量作为参数写进去 2. 接收页面,js获取url中的参数,并把参数放入隐藏的input里. 3.最后ajax的时候,把获取到的参数上传.

vue打开到新页面,并传递参数

打开新页面,有两种方式, 一种是标签式: <router-link tag="a" target="_blank" :to="{path: '/edit', params: {id: '000'}}"> 一种是函数编程式: let routeData = this.$router.resolve({ path:'/edit', query:{id: '000'} }); window.open(routeData.href, '_bl

android fragement之间互相传递参数

在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种是通过共同的Activity传递.这种方法是在Activity里面添加一个字段.来临时保存要一些值. 其实我开始想的是用SharedPreferences,不过想想太麻烦! 然后翻了一下Fragment的API.找到了另外一个方法来传递.就像Activity一样便捷的实现参数传递程序中的一段代码.是