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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
七个很有意思的PHP函数
May 12 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
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
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php判断访问IP的方法
2015/06/19 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python批量查询域名是否被注册过
2017/06/21 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
教育科学研究生自荐信
2013/10/09 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
高校自主招生自荐信
2013/12/09 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
社区端午节活动总结
2015/02/11 职场文书
何玥事迹观后感
2015/06/16 职场文书
青年联谊会致辞
2015/07/31 职场文书
学习委员竞选稿
2015/11/20 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python