vue路由跳转传参数的方法


Posted in Javascript onMay 06, 2019

vue中路由跳转传参数有多种,自己常用的是下面的几种

  1. 通过router-link进行跳转
  2. 通过编程导航进行路由跳转

 1. router-link

<router-link 
 :to="{
  path: 'yourPath', 
  params: { 
   name: 'name', 
   dataObj: data
  },
  query: {
   name: 'name', 
   dataObj: data
  }
 }">
</router-link>

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
 2. params -> 是要传送的参数,参数可以直接key:value形式传递
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递

 // 2,3两点皆可传递

2. $router方式跳转

// 组件 a
<template>
 <button @click="sendParams">传递</button>
</template>
<script>
 export default {
 name: '',
 data () {
  return {
  msg: 'test message'
  }
 },
 methods: {
  sendParams () {
  this.$router.push({
   path: 'yourPath', 
   name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
   params: { 
    name: 'name', 
    dataObj: this.msg
   }
   /*query: {
    name: 'name', 
    dataObj: this.msg
   }*/
  })
  }
 },
 computed: {

 },
 mounted () {

 }
 }
</script>
<style scoped></style>
----------------------------------------
// 组件b
<template>
 <h3>msg</h3>
</template>
<script>
 export default {
 name: '',
 data () {
  return {
  msg: ''
  }
 },
 methods: {
  getParams () {
  // 取到路由带过来的参数 
  let routerParams = this.$route.params.dataobj
  // 将数据放在当前组件的数据内
  this.msg = routerParams
  }
 },
 watch: {
 // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
  '$route': 'getParams'
 }
 }
</script>
<style scoped></style>

这次项目就遇到了这些问题, 希望能帮助到大家!

以上所述是小编给大家介绍的vue路由跳转传参数的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
js实现文字截断功能
Sep 14 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
微信小程序和百度的语音识别接口详解
May 06 #Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php Static关键字实用方法
2010/06/04 PHP
php单例模式的简单实现方法
2016/06/10 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python定义类的简单用法
2020/07/24 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
创业计划书六个要素
2013/12/26 职场文书
高一数学教学反思
2014/02/07 职场文书
小学毕业感言50字
2014/02/16 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
抗洪救灾标语
2014/10/08 职场文书
优秀教师推荐材料
2014/12/16 职场文书
给领导敬酒词
2015/08/12 职场文书
销售会议开幕词
2016/03/04 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python