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 相关文章推荐
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 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 array_flip() 删除数组重复元素
2009/01/14 PHP
php连接数据库代码应用分析
2011/05/29 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python如何实现爬取B站视频
2020/05/20 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
事业单位考核材料
2014/05/21 职场文书
五四青年节演讲稿
2014/05/26 职场文书
网吧消防安全责任书
2014/07/29 职场文书
庆祝国庆节标语
2014/10/09 职场文书
临时用工协议书范本
2014/10/29 职场文书