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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
mocha的时序规则讲解
Feb 16 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python实现淘宝购物系统
2019/10/25 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
优秀电子工程系毕业生求职信
2014/05/24 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
总经理岗位职责
2015/02/04 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
日元符号 ¥
2022/02/17 杂记
Python中npy和mat文件的保存与读取
2022/04/24 Python