方案一:

      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
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

vue --- 路由传参的几种方式的更多相关文章

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

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

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

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

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

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

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

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

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

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

  6. vue-router 路由传参的几种方式,刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  7. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

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

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

  9. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

随机推荐

  1. hdu 4521 小明系列问题——小明序列(线段树+DP或扩展成经典的LIS)

    小明系列问题--小明序列 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Tot ...

  2. 朝花夕拾——finally/final/finalize拨云雾见青天

    Java编程中.常常会使用到异常处理,而finally看似的是try/catch后对逻辑处理的完好,事实上里面却存在非常多隐晦的陷阱.final常见于变量修饰,那么你在内部类中也见过吧.finaliz ...

  3. [JZOJ 5908] [NOIP2018模拟10.16] 开荒(kaihuang)解题报告 (树状数组+思维)

    题目链接: https://jzoj.net/senior/#contest/show/2529/1 题目: 题目背景:尊者神高达作为一个萌新,在升级路上死亡无数次后被一只大黄叽带回了师门.他加入师门 ...

  4. opengl问题

    1.glCreateShader(GL_VERTEX_SHADER)失败原因: 在调用glewInit()初始化之后才能create shader;

  5. 优动漫PAINT-绘制透明布料教程

    原是一篇日语教程,觉得挺不错的,就劳烦会日语的朋友帮忙翻译了,特此分享!希望可以帮助到大家在绘画上的学习!原教程转载优动漫官网. 作者:JaneMere 相关资讯还可以关注www.dongmansof ...

  6. Ueditor富编辑器

    坑多的Ueditor富编辑器 第一步:修改serverUrl: window.BASEPATH + "notice/word" 第二部:添加依赖包 <dependency&g ...

  7. vector迭代器

    https://www.cnblogs.com/quant-lee/p/6618829.html

  8. 【LNOI2014】【BZOJ3626】NOIp2018模拟(三) LCA

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设$dep[i]$表示点i的深度,$lca(i,j)$表示i与j的最近公共祖 ...

  9. React显示文件夹中SVG

    import React from 'react'; import _ from 'lodash'; import styles from './iconPicker.less'; const req ...

  10. [HDU5687]2016"百度之星" - 资格赛 Problem C

    题目大意:有n个操作,每个操作是以下三个之一,要你实现这些操作. 1.insert : 往字典中插入一个单词2.delete: 在字典中删除所有前缀等于给定字符串的单词3.search: 查询是否在字 ...