现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

父组件中:

<li v-for="article in articles" @click="getDescribe(article.id)">

methods:

方案一:

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 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

{
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

注意事项:

1)、这里要特别注意在父组件中跳转到子组件使用

this.$router.push("/Home");//不传参
this.$router.push({
});//传参,参数以字段的形式加入到对象大括号{ }中

2)、在子组件中获取参数的时候是

this.$route.params.id

this.$route.query.id

注意是route而不是router


转载署名:腹中有书气自华

非商业性使用: 您不得将本作品用于商业目的。

禁止演绎: 您不得修改、转换或者以本作品为基础进行创作。

原文出处:https://segmentfault.com/a/1190000012393587?utm_source=tag-newest

感谢原创博主:腹中有书气自华

四、补充一种简单的路由写法

有时候我们不想传参,直接使用此种方式跳转

<router-link to="/backhome/emlserver" >
<i class="el-icon-bell" style="font-size:30px;"> </i>
</router-link>

其中to="/backhome/emlserver" 指向自己已经配置好的路由界面

vue之路由传参三种基本方式的更多相关文章

  1. 18 vue 动态路由传参

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

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

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

  3. vue中路由传参的方式

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

  4. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  5. C/C++语言中的函数参数传参三种对比

    学了很长时间C/C++有时指针方面还是有点乱. 希望大神发现如果下面有不对的地方请指出.我发现之所以我乱就是因为中文表述不准确的问题,比如 ,地址值和地址 #include <iostream& ...

  6. C# 多线程传参 三种实例

    //using Thread to download files //1111111111111111 foreach (var str in listDownloadPdf) { //string ...

  7. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  8. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

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

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

随机推荐

  1. JLRoutes笔记

    1.在info.plist中添加 <key>CFBundleURLTypes</key> <array> <dict> <key>CFBun ...

  2. Linux下安装Harbor 1.8.0 仓库的安装和使用(亲测)

    根据Harbor官方描述: Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distri ...

  3. 图论 List

    题目 #A 小 K 的农场 (Unaccepted)    #B 信息传递 (Unaccepted)    #C 最短路计数 (Accepted)    #D 通往奥格瑞玛的道路 (Accepted) ...

  4. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  5. 通过 homebrew下载速度过慢的解决方案

    请移步 https://www.cnblogs.com/jingxiaoniu/p/11123377.html 进行操作

  6. 由react循环总结的小知识

    const listItems = numbers.map((numbers,index)=><li key={index}>{numbers}</li>)   cons ...

  7. Label设置行间距

    内容摘要 UILabel显示多行文本 UILabel设置行间距 解决单行文本 & 多行文本显示的问题 场景描述 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行 ...

  8. tp框架视图层view——模板继承

    在做网站的时候,每个网站都有头部和尾部,也就是菜单栏和页脚,网站的各个子网页的头部和尾部基本就是一样的,所以tp框架提供了一种模板继承的方法: 1.首先在View的Main文件夹下建立一个base.h ...

  9. Naive Bayes Algorithm And Laplace Smoothing

    朴素贝叶斯算法(Naive Bayes)适用于在Training Set中,输入X和输出Y都是离散型的情况.如果输入X为连续,输出Y为离散,我们考虑使用逻辑回归(Logistic Regression ...

  10. 贪吃蛇大作战canvas实现(手机触屏操作)--地图逻辑

    //html部分 <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...