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

在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路由传参的基本模式的更多相关文章

  1. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  2. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  4. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  5. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  6. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  7. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  8. vue 路由传参

      mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由   2.history路由 不会带#的     单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...

  9. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

随机推荐

  1. Css/Js推荐类库

    animate.css https://daneden.github.io/animate.css WOW.js http://mynameismatthieu.com/WOW owl.carouse ...

  2. Log4Net配置日志

    1.log4net 1)新建一个Net空白项目,在引用出点击管理NuGet程序包,搜索log4net并安装 2)建立log4net.config配置文件 在configuration里面添加如下代码, ...

  3. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  4. RESTful支持

    springmvc restful 支持 - 哎幽的成长 - CSDN博客http://blog.csdn.net/u012373815/article/details/47208345 RESTfu ...

  5. GB GBRT XgBoost

    https://blog.csdn.net/github_38414650/article/details/76061893 https://www.cnblogs.com/wxquare/p/554 ...

  6. vue 学习笔记—Es6

    // 第一部分 /* console.log(a+'c'); var a = 1; console.log(b+'c'); let b =1; */ // 上述代码 left定义报错 原因: /* v ...

  7. sonar排除实体类配置

    sonar覆盖率检查可以将一些实体类排除,maven项目可以在pom.xml文件中添加如下配置 <properties> <sonar.exclusions> src/main ...

  8. Web方面的错误, 异常来自hresult:0x80070057(E_INVALIDARG)

    删除 C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/Temporary ASP.NET files 这个文件夹. 解决方法: 1.代码保存频繁一点.做一个 ...

  9. ROS 可视化(一): 发布PointCloud2点云数据到Rviz

    1. 相关依赖package.xml 需要添加对 pcl_ros 包的依赖 2. CMakeLists.txt find_package(PCL REQUIRED) include_directori ...

  10. 老师博客copy

    新闻 管理   Py西游攻关之基础数据类型   数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频 ...