3种vue路由传参的基本模式


Posted in Javascript onFebruary 22, 2018

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功。

在vue路由中,支持3中传参方式。

场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容。

父组件中:

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

方案一:

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

// 方案一,需要对应路由配置如下:
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

方案二:

// 父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

方案三:

// 父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置:
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

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

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
JS常用算法实现代码
Nov 14 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
webpack打包并将文件加载到指定的位置方法
Feb 22 #Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
深入理解ES6中let和闭包
Feb 22 #Javascript
vue+iview+less+echarts实战项目总结
Feb 22 #Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python机器学习之神经网络实现
2018/10/13 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python ini文件常用操作方法解析
2020/04/26 Python
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
委托书怎样写
2014/08/30 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
大学军训通讯稿
2015/07/18 职场文书
教师节校长致辞
2015/07/31 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
win10下go mod配置方式
2021/04/25 Golang
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
MySQL 字符集 character
2022/05/04 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL