vue路由传参三种基本方式详解


Posted in Javascript onDecember 09, 2019

这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

父组件中:

<li v-for="article in articles" @click="getDescribe(article.id)">

methods:

方案一:

getDescribe(id) {
//  直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

方案一,需要对应路由配置如下:

{
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }

很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二:

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

子组件中: 这样来获取参数

this.$route.params.id

方案三:

父组件:使用path来匹配路由,然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=?

this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

对应路由配置:

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

对应子组件: 这样来获取参数

this.$route.query.id

注意事项:

1)、这里要特别注意在父组件中跳转到子组件使用

this.$router.push("/Home");//不传参
this.$router.push({
});//传参,参数以字段的形式加入到对象大括号{ }中

2)、在子组件中获取参数的时候是

this.$route.params.id

this.$route.query.id

注意是route而不是router

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
vue使用nprogress实现进度条
Dec 09 #Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 #Javascript
vue vant Area组件使用详解
Dec 09 #Javascript
JS中的模糊查询功能
Dec 08 #Javascript
详解一些适用于Node.js的命名约定
Dec 08 #Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 #Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php获取域名的google收录示例
2014/03/24 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
Python作用域用法实例详解
2016/03/15 Python
python编程实现归并排序
2017/04/14 Python
神经网络python源码分享
2017/12/15 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python程序变成软件的实操方法
2019/06/24 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
详解anaconda安装步骤
2020/11/23 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
骨干教师考核方案
2014/05/09 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记