da给我们点击父组件之后跳转到子组件之后,需要携带参数,便于子组件获取数据。传参方式有三种:
一、

      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来传递参数了,因为父组件中,已经使用params来携带参数了。

   {
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

vue-router路由传参的更多相关文章

  1. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  2. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  3. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  4. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

  5. vue之路由传参三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  6. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  7. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  8. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

  9. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

  10. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

随机推荐

  1. tomcat 中项目配置文件统一目录设置

    在tomcat 安装目录中 conf 下的  catalina.properties 文件中 有个  shared.loader= 配置为   shared.loader="${catali ...

  2. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  3. IIS Service Unavailable HTTP Error 503. The service is unavailable.

    IIS突然报了上图这样一个错误,很意外,这问题的来源百度上有多个版本,处理的办法几乎都是一样的,你可以通过下边这个链接去查看, https://www.cnblogs.com/fri-yu/p/407 ...

  4. C++标准模板库(STL)之Stack

    1.Stack的常用用法 stack:栈,一个后进先出的容器. 1.1.stack的定义 加上头文件#include<stack>和using namespace std; stack&l ...

  5. 使用 dva 如何配置异步加载路由组件

    来源:https://www.jianshu.com/p/69694013e36b----------------------------------------------------- 普通方式 ...

  6. textarea右下角黑点

    先记录问题及解决方法,原因后续深入了解 在布局中,用到了textarea 输入框,在Android手机上却显示右下角有一个黑点,检查代码无误,代码没有多余的点符号. 解决:在textarea 中添加 ...

  7. Python列表操作集合

    对于python列表里元素的操作主要分为以下几个方面: 1.向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定 ...

  8. ASP.NET 文件上传的实现(Upload)

    1.最近应项目开发的需求要实现附件的异步上传和下载. 2.上传:文件上传到指定的路径下,并返回上传文件的信息给前端界面,如:文件的图标.上传的文件名.文件的大小. 3.上传后,在前端界面上显示上传的文 ...

  9. Unity中用Mono插件解析xml文件

    1.解压压缩包,把文件夹拖到脚本文件夹下 Mono是第三方基金会开发的开源的东西,通过Mono基础上开发的程序可以在各个系统下运行.开发语言是C#. 用插件解析比较高效,平台运行稳定.使用简单. Un ...

  10. [数]数学系列预习->补水题ver.

    ---恢复内容开始--- 话说要学反演了,contest一题都搞不定,整理题目暂且搁置,数学笨蛋来学一下数学_(:з」∠)_ ---恢复内容结束--- 是的,预习看了半天教学,没有整理,做题又都不会, ...