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 图片切换插件(代码比较少)
May 07 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
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创建基本身份认证站点的方法详解
2013/06/08 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python实现身份证号码解析
2015/09/01 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python如何使用代码运行助手
2020/07/03 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
医学生自荐信
2013/12/03 职场文书
给校长的建议书600字
2014/05/15 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技