<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. linux+php实现定时任务[链接]

    1.crontab 详细用法 定时任务 https://www.cnblogs.com/aminxu/p/5993769.html 2.查看crontab日志 https://www.cnblogs. ...

  2. Delphi XE-Windows下配置开发环境 (Android版/IOS)

    Delphi XE-Windows下配置开发环境  (Android版/IOS)   http://www.52jike.com/thread-1-1-1.html Delphi XE5的Androi ...

  3. JSLint报错翻译

    “Missing semicolon.” : “缺少分号.”,“Use the function form of \”use strict\”.” : “使用标准化定义function.”,“Unex ...

  4. JavaScript拼接html字符串时截断问题

    在项目中碰到一个问题,就是JavaScript拼接html标签时,里面特殊字符会有些问题,比如单引号截断配对,导致后面的内容不显示或显示错误.在此记录一下. 下面贴一段简化的代码,若有描述不清的地方还 ...

  5. 第六章 MVC之 FileResult和JS请求二进制流文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  6. Nginx负载均衡实例

    upstream MyServers{ server 192.168.63.137; server 192.168.63.138; server 192.168.63.140; } server{ l ...

  7. SharePoint 2013: Workflow Manager Backend 服务意外地终止

    一.环境:SharePoint 2013 + Workflow Manager 1.0 二.错误描述: Workflow Manager Backend 服务意外地终止,这种情况已经出现了 42106 ...

  8. 计算机基础+python安装注意问题+python变量介绍

    1.什么是编程语言语言是一个事物与另外一个事物沟通的介质编程语言是程序员与计算机沟通的介质 2.什么是编程编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来表达的结果就是程序,程 ...

  9. ansible和python的zabbix_api批量添加rsync服务的监控

    一.正常的处理流程: 1.添加zabbix用户对rsync程序的sudo权限,且不需要输入密码 # visudo即在/etc/sudoers配置文件最后添加如下内容 Defaults:zabbix ! ...

  10. HTTP协议详解(一)

    1 http协议介绍 1.1 简单介绍  HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consort ...