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 获取链接(url)参数的方法
Feb 15 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
php xml文件操作代码(一)
2009/03/20 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
Python操作列表的常用方法分享
2014/02/13 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
如何查找网页漏洞
2016/06/22 面试题
银行实习的自我鉴定
2013/12/10 职场文书
教师求职自荐信
2014/03/09 职场文书
关于保护环境的标语
2014/06/09 职场文书
篮球比赛口号
2014/06/10 职场文书
辞职书格式样本
2015/02/26 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang