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 replace正则表达式应用案例讲解
Jan 17 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
JQuery学习总结【二】
Dec 01 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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函数utf8转gb2312编码
2006/12/21 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
php多进程应用场景实例详解
2019/07/22 PHP
js option删除代码集合
2008/11/12 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python放大图片和画方格实现算法
2018/03/30 Python
django解决跨域请求的问题
2018/11/11 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python线程的几种创建方式详解
2019/08/29 Python
浅析python内置模块collections
2019/11/15 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
python中类与对象之间的关系详解
2020/12/16 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书