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. pta

    一:实验代码 include <stdio.h> char theValue[10] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j ...

  2. 【C/C++】C++11 Variadic Templates

    Variadic Templates 1.function template:利用“参数个数逐一递减”的特性,实现递归函数调用 template <typename T, typename... ...

  3. python note 4

    1.使用命令行打开文件 t=open('D:\py\123.txt','r') t.read() 在python和很多程序语言中""转义符号,要想输出\要么多加一个\写成\ 要么在 ...

  4. K8S配置安装全过程

    V1.11.1https://github.com/kubernetes/kubernetes/releases/tag/v1.11.1环境准备:系统:centos7.2.1511[root@mast ...

  5. springboot秒杀课程学习整理1-1

    1)新建一个maven工程quickStart,然后在pom文件里添加依赖 <parent> <groupId>org.springframework.boot</gro ...

  6. My third homework

    题目要求 定义一个包含有10个整数的数组a并初始化,定义一个指针变量p,p指向数组a,定义函数fun,要求在fun内部访问数组,并打印出数组中各元素的值,要求在fun函数内不要出现数字10. 代码: ...

  7. emacs安装及配置

    目录 平台 安装 基本配置 配置文件结构 elpa仓库管理 主题配色 字体显示配置(解决中文卡顿) 插件配置 markdown 简介 markdown-mode markdown-toc org导出m ...

  8. git命令提交新项目

    新建的项目没有与git关联过git initgit add .git commit -m "注释"git remote add origin 新SSH:URLgit push -f ...

  9. FX-玩列表

    list = []while True: meus = ("1.查看","2.添加","3.删除","0.退出") pr ...

  10. Ubuntu16.04下安装OpenCV3.2.0

    1.安装官方给的opencv依赖包 $ sudo apt-get install build-essential $ sudo apt-get install cmake git libgtk2.0- ...