vue params、query传参使用详解


Posted in Javascript onSeptember 12, 2017

最近在学习Vue,本文介绍了vue params、query传参使用,分享给大家,也给自己留个笔记

声明式:<router-link :to="...">

编程式:router.push(...)

这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数。

1、router.push使用

router/index.js

export default new Router({
 routes: [
   {
   path: '/',
   name: 'A',
   component: require('../components/A')
  },
  {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
 ]
})

上边,在路由中为B组件添加两个参数 name ,age

A组件,绑定一个@click事件,跳转B组件传参 使用params

<template>
 <div> <!---只允许有一个最外层标签 !-->
  <div>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>-->
  </div>
 </div>
</template>
<script>
 export default {
  data: function () {
   return {
    message: 'vue好帅啊!'
   }
  },
  methods: {
   toBFun: function(){
    this.$router.push({name:'B',params:{name:'xy',age:22}});
   }
  }
 }
</script>
<style>

</style>

这时浏览器会显示 :http://localhost:8080/#/B/xy/22

在看下query  传值及地址变化

同样在 router/index.js路由文件中 不变有两个参数name,age

{
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }

在A组件中,之前参数传递是通过params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

替换后,query

this.$router.push({name:'B',query:{name:'xy',age:22}});

这时浏览器会发现:http://localhost:8080/#/?name=xy&age=22

 通过以上两种,页面刷新后,参数还会保留的。

获取值有些不相同:
params:this.$route.params.name;

query:this.$route.query.name;

------------------------ 还有种方式--------------------------------------------

 使用 router-link

<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>

跳转后,浏览器地址为:http://localhost:8080/#/B?name=zzz&age=22

跟  this.$router.push(...) 是一样的

<router-link :to="{path:'/B/123'}">
    跳转B组件</router-link>
  </div>
{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

取值

this.$route.params.name

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
node.js实现上传文件功能
Jul 15 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 #Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 #Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 #Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 #Javascript
详解angular笔记路由之angular-router
Sep 12 #Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
vue引入jq插件的实例讲解
Sep 12 #Javascript
You might like
php二维数组排序详解
2013/11/06 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
软件测试面试题
2014/01/05 面试题
运动会广播稿100字
2014/01/11 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2014年医务科工作总结
2014/12/18 职场文书
卡特教练观后感
2015/06/08 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python