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代码
Mar 05 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
asp 取文本框名称代码
2008/12/02 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
浅谈Python中的私有变量
2018/02/28 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python timeit模块原理及使用方法
2020/10/10 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Python运算符+与+=的方法实例
2021/02/18 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
导游词之天津盘山
2019/11/01 职场文书
Python字符串的转义字符
2022/04/07 Python