<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. MySQL绿色版安装整套流程

    https://www.cnblogs.com/LiuChunfu/p/6426918.html

  2. android 控件设置透明度

    问题:java文件中引用组件设置透明度:mGuideLayout.getBackground().setAlpha(125); 一直报null 修改办法:对应的布局文件中添加 android:back ...

  3. mac 电脑连接linux 服务器

    Mac 电脑下连接Linux服务器 命令: ssh -p 端口号(22) 用户名@ip OK,输入密码,搞定

  4. VS code 配置C++编译环境

    主要参考链接:https://blog.csdn.net/bat67/article/details/76095813 另外有如下几处需要注意的地方: (1) 这部需要提前“run build tas ...

  5. git与eclipse集成之clone远程仓库到本地

    1. Git与Eclipse集成 1.1. Clone远程仓库到本地 1.1.1.        获取远程仓库地址(选择北京,访问速度比深圳快) 1.1.2.        将远程仓库导入到Eclip ...

  6. 带你十分钟快速构建好 SpringBoot + SSM 框架

    目前最主流的 java web 框架应该是 SSM,而 SSM 框架由于更轻便与灵活目前受到了许多人的青睐.而 SpringBoot 的轻量化,简化项目配置, 没有 XML 配置要求等优点现在也得到了 ...

  7. oracle 会话 解锁

    背景 这是当年第一次记录博客,当初记录的原因是感觉有些问题很少碰到,碰到有网上寻找一遍,文章很少是正好对症的,折腾半天终于解决了,但是没有记录过程,结果下次碰到又要从来一次.有的问题还极其不好找,or ...

  8. webp 图形文件操作工具包 win32 (编译 libwebp-20171228-664c21dd 版本)

    源码下载地址     https://chromium.googlesource.com/webm/libwebp/ 版本                   libwebp-20171228-664 ...

  9. 运行vue遇到的坑(续更

    从Github上clone了别人的vue项目在自己电脑上运行时,出现很多错误,暂且列举下: 1.chromedriver@2.35.0安装不了的问题 正常项目clone下来,在cmd里运行: $ np ...

  10. Anaconda安装新模块

    如果使用import导入的新模块没有安装,则会报错,下面是使用Anaconda管理进行安装的过程:1.打开Anaconda工具,如图: 2.可通过输入 conda list 查看已安装的模块 3.如果 ...