<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. 用户态驱动--UIO机制的实现【转】

    转自:https://blog.csdn.net/u013982161/article/details/51584900 1 uio理论部分   1.1为什么出现了UIO? 硬件设备可以根据功能分为网 ...

  2. Datasnap 服务端 (Server)Session 管理 --- 解决 全示例慢(Google)

    Datasnap 服务端 (Server)Session  管理:  http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Server_Side_Ses ...

  3. LaTeX Error: Something's wrong--perhaps a missing \item

    使用Latex 引用参考文献,.bib文件是个很好的助手,创建后 1.第一步点击Latex编译,可以获得*.aux文件.*.dvi文件.*.log文件以及*.gz文件: 2.第二步点击Bibtex编译 ...

  4. mysql使用group_by

    GROUP BY必须得配合聚合函数来用,分组之后你可以计数(COUNT),求和(SUM),求平均数(AVG)等 常用聚合函数 count() 计数 sum() 求和 avg() 平均数 max() 最 ...

  5. Mudo C++网络库第十章学习笔记

    C++编译链接精要 C++语言的三大约束: 与C兼容, 零开销(zero overhead)原则, 值语义; 兼容C语言的编译模型与运行模型, 也就是锁能直接使用C语言的头文件和库; 头文件包含具有传 ...

  6. TCP、消息分包和协议设计

    TCP是一种流式协议 TCP是一种面向连接的.可靠的.基于字节流的传输层通信协议. 流式协议的特点是什么?就像流水连续不断那样,消息之间没有边界.例如send了3条消息(这里的“消息”是指应用层的一个 ...

  7. 码云 Git No network connection

    背景 git,好久没用了都.心血来潮还是赶紧熟悉下吧.果不其然,每次要熟悉或开始一个东西,立马就出现问题.本来好好的环境竟然不行了,搞定后感觉应该是换了网络环境的事.这倒次要,主要让我想起了最初学习g ...

  8. ansible笔记(8):常用模块之系统类模块(二)

    ansible笔记():常用模块之系统类模块(二) user模块 user模块可以帮助我们管理远程主机上的用户,比如创建用户.修改用户.删除用户.为用户创建密钥对等操作. 此处我们介绍一些user模块 ...

  9. Centos 6 安装FreeSWITCH

    为了安装FreeSWITCH ,我选择的Linux是CentOS,目前最新的Centos版本是6.具体安装CentOS的是步骤详见网上的其它资料,本节的主要目的是为了记录FreeSWITCH的安装过程 ...

  10. 转载:MySQL字段类型

    原文:https://www.cnblogs.com/jennyyin/p/7895010.html 数值类型 类型 大小 范围(有符号) 范围(无符号) 用途 TINYINT 1 字节 (-128, ...