3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功。
在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 这很重要~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
3种vue路由传参的基本模式的更多相关文章
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- vue 路由传参
mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由 2.history路由 不会带#的 单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
随机推荐
- Css/Js推荐类库
animate.css https://daneden.github.io/animate.css WOW.js http://mynameismatthieu.com/WOW owl.carouse ...
- Log4Net配置日志
1.log4net 1)新建一个Net空白项目,在引用出点击管理NuGet程序包,搜索log4net并安装 2)建立log4net.config配置文件 在configuration里面添加如下代码, ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- RESTful支持
springmvc restful 支持 - 哎幽的成长 - CSDN博客http://blog.csdn.net/u012373815/article/details/47208345 RESTfu ...
- GB GBRT XgBoost
https://blog.csdn.net/github_38414650/article/details/76061893 https://www.cnblogs.com/wxquare/p/554 ...
- vue 学习笔记—Es6
// 第一部分 /* console.log(a+'c'); var a = 1; console.log(b+'c'); let b =1; */ // 上述代码 left定义报错 原因: /* v ...
- sonar排除实体类配置
sonar覆盖率检查可以将一些实体类排除,maven项目可以在pom.xml文件中添加如下配置 <properties> <sonar.exclusions> src/main ...
- Web方面的错误, 异常来自hresult:0x80070057(E_INVALIDARG)
删除 C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/Temporary ASP.NET files 这个文件夹. 解决方法: 1.代码保存频繁一点.做一个 ...
- ROS 可视化(一): 发布PointCloud2点云数据到Rviz
1. 相关依赖package.xml 需要添加对 pcl_ros 包的依赖 2. CMakeLists.txt find_package(PCL REQUIRED) include_directori ...
- 老师博客copy
新闻 管理 Py西游攻关之基础数据类型 数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频 ...