<template>
<a @click="goNext">Next</a>
<input type="text" v-model="year"/>
<input type="text" v-model="day"/>
</template> <script>
export default {
data() {
rerurn {year: '', day: ''}
},
methods: {
goNext() {
this.$router.push({name: 'test', params: {year: this.year, day: this.day}})
}
}
}
</script>

A页面传递

<template>
<div>{{this.$route.params.year}}{{this.$route.params.day}}</div>
</template>

B页面接收

{
path: '/test',
name: 'test',
component: Test
}

修改router的index.js

如果还看不明白,参考:https://www.cnblogs.com/WQLong/p/7804215.html、https://blog.csdn.net/qq_15646957/article/details/78070862

反正我是看了这才明白的。

VUE,页面跳转传多个参数的更多相关文章

  1. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

  2. vue页面跳转传参

    跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名

  3. 用jQuery.ajaxWebService请求WebMethod,Ajax处理实现局部刷新;及Jquery传参数,并跳转页面 用post传过长参数

    首先在aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod]  public static string GetUserName()   {  //. ...

  4. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  5. Vue页面跳转动画效果实现

    Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d

  6. vue页面跳转以及传参和取参

    vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...

  7. vue:页面跳转和传参(页面之间,父传子,子传父)

    1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...

  8. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  9. VUE页面跳转方式

    一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...

随机推荐

  1. 使用WinIo32绕过密码控件实现自动登录

    通过winIO32绕过密码控件,实现自动登录 环境: vmware上安装windows 32位系统:windows xp / windows 7 selenium版本: 3.11.0 IEDriver ...

  2. Linux 查看系统硬件信息[转]

    原文:http://www.cnblogs.com/ggjucheng/archive/2013/01/14/2859613.html linux查看系统的硬件信息,并不像windows那么直观,这里 ...

  3. C++ 仿函数

    先考虑一个简单的例子:假设有一个vector<string>,你的任务是统计长度小于5的string的个数,如果使用count_if函数的话,你的代码可能长成这样: 1 bool Leng ...

  4. 【Linux】时间同步设置+防火墙设置+SELinux设置

    时间同步设置 在大数据集群环境中,要求每台集群的时间必须是同步的,这样我们就会要求每台集群的时间必须和一台服务的时间是同步的.接下来介绍一下步骤: 1,设置ntp客户端 yum -y install ...

  5. 获取本地计算机名和IP地址

    WSADATA wsadata; != WSAStartup(MAKEWORD(, ), &wsadata)) { AfxMessageBox("初始化网络环境失败!"); ...

  6. 034_nginx报错总结

    一.nginx: [emerg] "client_header_timeout" directive is not allowed here in /opt/nginx/conf/ ...

  7. 023_nginx跨域问题

    什么是跨域? 使用js获取数据时,涉及到的两个url只要协议.域名.端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题.例如客户端的域名是www.redis.com.cn,而请求的域名是w ...

  8. java压缩图片质量

    使用了工具thumbnailator,据说thumbnailator是一个非常好的图片开源工具,使用起来很方便.不过没仔细看过,我只是需要压缩图片,让其占用空间变小而已.使用maven引入jar包 & ...

  9. Kubernetes重要概念理解

    Kubernetes重要概念理解 kubernetes是目前最主流的容器编排工具,是下一代分布式架构的王者.2018年的kubernetes第一个版本1.10已经发布.下面整理一下,kubernete ...

  10. 转载:UML学习(二)-----类图(silent)

    原文:http://www.cnblogs.com/huiy/p/8552607.html 1.什么是类图 类图(Class diagram)主要用于描述系统的结构化设计.类图也是最常用的UML图,用 ...