方案一:

      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. AWS使用心得:当初我曾错过的那些宝贵经验

    在今天的文章中,我整理出了大量当初以前错过.而至今仍将我追悔莫及的Amazon Web Services(简称AWS)使用心得. 在几年来的实践其中,我通过在AWS之上新手构建及部署各类应用程序而积累 ...

  2. hdu2838Cow Sorting(树状数组+逆序数)

    题目链接:点击打开链接 题意描写叙述:给定一个长度为100000的数组,每一个元素范围在1~100000,且互不同样,交换当中的随意两个数须要花费的代价为两个数之和. 问怎样交换使数组有序.花费的代价 ...

  3. YII 数据库查询

    $userModel = User::Model(); $userModel->count(); $userModel->count($condition); $userModel-> ...

  4. 343D/Codeforces Round #200 (Div. 1) D. Water Tree dfs序+数据结构

    D. Water Tree   Mad scientist Mike has constructed a rooted tree, which consists of n vertices. Each ...

  5. [JZOJ 5893] [NOIP2018模拟10.4] 括号序列 解题报告 (Hash+栈+map)

    题目链接: https://jzoj.net/senior/#main/show/5893 题目: 题解: 考虑暴力怎么做,我们枚举左端点,维护一个栈,依次加入元素,与栈顶元素和栈内第二个元素相同时弹 ...

  6. CentOS7系统安装完MySQL后启动MySQL提示无服务

    重新安装MariaDB数据库即可解决,MySQL所有命令可通用 MariaDB MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,开发这个分支的原因之一是:甲骨文公司收购了My ...

  7. POJ 3213 矩阵乘法(优化)

    思路: 1.暴力出奇迹 n=1000 n^3矩阵乘法竟然能卡过...(Tips:不要乱写读入优化,这玩意儿加了超时,不加AC--) 2. 注意题目中的"最多只能有一个地方不一样,," ...

  8. 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...

  9. .NET 拼音汉字转化(全面)

    引言 这是一个.NET 用C#语言编写的  拼音转汉字类,考虑到有很多拼音转汉字,但是试用过发现大部分有很多生僻字都没有办法显示.在此分享一个支持绝大多数的较为全面的拼音汉字转化帮助类.不多说,代码附 ...

  10. Mybatis传递多个参数的解决办法(三种)

    第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...