<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. OGG选择捕捉和应用模式

    本章包含的信息可帮助您确定适用于数据库环境的捕获和应用模式. 主题: Oracle GoldenGate捕获和应用进程概述 决定使用哪种捕捉方法 决定使用哪种应用方法 同时使用不同的捕捉和应用模式 切 ...

  2. P2805 [NOI2009]植物大战僵尸

    题目地址:P2805 [NOI2009]植物大战僵尸 最大权闭合子图 若有向图 \(G\) 的子图 \(V\) 满足: \(V\) 中顶点的所有出边均指向 \(V\) 内部的顶点,则称 \(V\) 是 ...

  3. Matplotlib(used in paper)

    1. 转自:matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域 注:如果不采用 subplot_adjust + margin(0,0),而是在fig.savefig( ...

  4. nginx反向代理解决跨域

    nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上.通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问.对于浏览器来说,访问的就是同源服务器上的一个 ...

  5. xtrabackup

    mysqldump备份方式是采用逻辑备份,其最大的缺陷就是备份和恢复速度都慢,对于一个小于50G的数据库而言,这个速度还是能接受的,但如果数据库非常大,那再使用mysqldump备份就不太适合了.而使 ...

  6. js导出excel增加表头、mso-number-format定义数据格式

    问题1:增加表头 js导出表格时,只会导出table里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下: tableString:新增的表头内容字符串: c ...

  7. 关于iwinfo的调试

    在调试 主动扫描时,调用命令 “iwinfo  wlan0 scan”时, 在iwinfo中添加的调试语句没有打印和记录到log中去. 后查看iwinfo的makefile发现,在生成iwinfo程序 ...

  8. Java实现三大简单排序算法

    一.选择排序 public static void main(String[] args) { int[] nums = {1,2,8,4,6,7,3,6,4,9}; for (int i=0; i& ...

  9. zxing源码编译与运行

    编译的jar文件下载地址:http://files.cnblogs.com/rainboy2010/zxing.zip zxing是一个开源的解析条形码/二维码的类库,广泛应用于Android 各大A ...

  10. js-DOM事件

    var EventUtil = { addHandler:function(elm,type,handler){//添加事件 if(elm.addEventListener){ elm.addEven ...