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. YouTuboba视频搬运~哔哩哔哩

    将YouTube上面的视频搬运到哔哩哔哩上面教程 1.首先选择YouTube上面一个视频,需要谷歌登录,然后保存这个视频播放链接. 2.在浏览器中输入这个网址:en.savefrom.net,点击En ...

  2. 新建ui文件及相应.h和.cpp文件

    1.在Qt Creator中新建一个任意的项目(如untitled): 2.在该项目中添加QT设计师界面类:   3.将新建的3个文件(.ui..h..cpp)拷贝到目标项目文件夹中: 4.分别在目标 ...

  3. Vue.js安装使用教程

    一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...

  4. Java 开发笔记

    共同学习,以下内容,随时更新. 前端 1.前端页面&apos;是单引号的转义符,"是双引号.  问题(前端JS进行参数传递时,使用的是单引号扩住变量,但是变量形式为 2019-27  ...

  5. Sublime自动去除代码行尾多余的空格

    Preferences - > Settings - User 加入: "trim_trailing_white_space_on_save": true Ctrl+s就会自 ...

  6. springboot配置视图控制器

    实现WebMvcConfigurer接口 /** * @descripte 配置自己的视图解析器 */@Configurationpublic class MyViewConfigController ...

  7. GDAL——命令使用专题——gdalinfo命令

    GDAL——命令使用专题——gdalinfo命令  前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用 ...

  8. 如何安全的捂住你的AngelToken钱包

    Angel Token钱包的重要性 AngelToken基于区块链底层技术的去中心化.安全可靠的特点,开发了数字资产钱包,是行业领先的中心化token钱包和去中心化交易平台相结合的链数字资产智能钱包. ...

  9. java字符串截取指定下标位置的字符串

    public class A { public static void main(String[] args) { //定义的字符串 String s = "Hello World" ...

  10. git切换用户踩坑

    1)配置用户信息 git config --global user.name "username" git config --global user.email "**@ ...