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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 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 函数执行效率的小比较
2010/10/17 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python学习笔记之多进程
2020/08/06 Python
ASP.NET Core中的配置详解
2021/02/05 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
八年级美术教学反思
2014/02/02 职场文书
2015元旦标语横幅
2014/12/09 职场文书
市场营销计划书范文
2015/01/16 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
浅谈Web Storage API的使用
2021/06/23 Javascript
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL