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获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JavaScript的词法结构精华篇
Oct 17 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php构造函数实例讲解
2013/11/13 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
详解jQuery中的事件
2016/12/14 Javascript
树结构之JavaScript
2017/01/24 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Python实现弹球小游戏
2020/08/01 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
本科毕业生自荐信
2014/05/26 职场文书
药剂专业求职信
2014/06/20 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
教师工作表现评语
2014/12/31 职场文书
用电申请报告范文
2015/05/18 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js