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的一些小应用收集
Mar 27 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
Jquery使用val方法读写value值
May 18 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
JAVA/JSP学习系列之二
2006/10/09 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python实现绘制树枝简单示例
2014/07/24 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python生成数字图片代码分享
2017/10/31 Python
Python交互环境下实现输入代码
2018/06/22 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python接口测试文件上传实例解析
2020/05/22 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
初一家长会邀请函
2014/01/31 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
工作保证书
2015/01/17 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python