1) 在router文件下的index.js中,添加相关路径

routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
},
{
path:"/paramsUrl",
component:paramsUrl
}
]

2) 在HelloWorld组件中传递参数,这里用的是点击事件跳转

this.$router.push({path:"/paramsUrl",query:{name:'Tom',age:18,sex:'male'}})

在paramsUrl组件中可以在url中看到

http://localhost:8080/#/paramsUrl?name=Tom&age=18&sex=nan

获取参数方法

this.$route.query

注意:如果在router中有那么参数,只需要将第二步中path替换成name即可

Vue:不同页面之间的传递参数(二)---query的更多相关文章

  1. Vue:不同页面之间的传递参数--params

    在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现.而params传参分为两种情况: 1.参数在url中显示 首先你要确定自己要传的参数,并在控制路由的文件中的Router ...

  2. js两个页面之间URL传递参数中文乱码

  3. jsp页面之间传中文参数显示乱码问题的解决

    最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...

  4. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  5. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  6. 转载如何实现portlet之间的传递参数

    Liferay 6开发学习(三十):跨页面Portlet之间的调用与数据传递 2014年10月09日 Liferay 评论 2 条 阅读 4,209 views 次 Portlet之间的通信方法有多种 ...

  7. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  8. ASP.NET MVC 页面调整并传递参数

    转自:http://blog.csdn.net/zhensoft163/article/details/7174661 使用过ASP.NET MVC的人都知道在MVC中页面后台中常用的页面跳转方法有几 ...

  9. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

随机推荐

  1. shell拷贝文件到另一台机器

    #!/bin/bash data=$(date "+%Y-%m-%d %H:%M:%S") ip='192.168.10.14' password='fan' gitBak='/v ...

  2. 010_linuxC++之_运算符重载

    (一)运算符重载:运算符重载,就是对已有的运算符重新进行定义,赋予其另一种功能,以适应不同的数据类型. (二)实现类不同对象里中变量的相加 (三)程序 #include <iostream> ...

  3. Spring bean 实现InitializingBean和DisposableBean接口实现初始化和销毁前操作

    # InitializingBean接口> Spring Bean 实现这个接口,重写afterPropertiesSet方法,这样spring初始化完这个实体类后会调用这个方法```@Over ...

  4. HTML JS 弹层后底部页面禁止滚动处理

    1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 1 2 3 4 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = &quo ...

  5. 【luoguP4124 】[CQOI2016]手机号码

    题目描述 人们选择手机号码时都希望号码好记.吉利.比如号码中含有几位相邻的相同数字.不含谐音不吉利的数字等.手机运营商在发行新号码时也会考虑这些因素,从号段中选取含有某些特征的号码单独出售.为了便于前 ...

  6. 一 、Linux基础命令及使用帮助

    linux的哲学思想: 一切皆文件: 把几乎所有资源,包括硬件设备都组织为文件系统 由众多单一目的小程序组成:一个程序只实现一个功能,而且要做好 组合小程序完成复杂任务 尽量避免跟用户交互 目的:实现 ...

  7. 记一次antlr错误:ANTLR Tool version 4.5.3 used for code generation does not match the current runtime version 4.7.2ANTLR

    场景:重构spark 2.1版本的sql语法.因此 需要使用antlr: 前期准备:idea安装了antlr插件(antlr的4.7.2版本) 因此在maven工程中添加了antlr的依赖: < ...

  8. gitlab使用指南

    gitlab是公司内部搭建的用于管理代码项目的类似于github的系统. 登录注册 注册时使用的名称和邮箱请按照公司内部格式进行信息填写. 在注册完成以后有可能会向邮箱里发送一个注册邮件,如果要求发送 ...

  9. elasticsearch Delete (根据条件删除)

    之前在 2.X版本里 这个Delete By Query功能被去掉了 因为官方认为会引发一些错误 如需使用 需要自己安装插件. bin/plugin install delete-by-query 需 ...

  10. mitmproxy修改二级代理

    第一步 mitmweb --mode upstream:http://114.240.101.242:5672 -s server.py 第二步 def request(self, flow: mit ...