vue-router路由传参
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路由传参的更多相关文章
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- vue里面路由传参的三种方式
1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...
- vue之路由传参三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
- vue中路由传参的方式
一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- vue $router.push 传参的问题
$router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...
- angular路由传参和获取路由参数的方法
1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
随机推荐
- JAVA程序设计的第一次作业
这是我第一次接触博客,刚开始用博客很生疏,感觉很麻烦,但是后来慢慢从老师那里了解到了许多博客可以带给我们的便利.通过博客,我们不仅可以记录自己从刚开始进入程序学习的懵懵懂懂到后来想要学,想深究,想探讨 ...
- classList用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于Jmeter的简单认识
Jmeter初识 Apache Jmeter概述 是100%的纯java桌面应用,用于压力测试与功能测试,它开始被设计用于web应用测试,后来扩展到其他测试领域,通过线程租来驱动多个线程运行测试脚本, ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.6 Defining Projections and Extents
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.6 Defining Projections and Extents 一.前言 当在m ...
- 本地搭建Apache Tomcat服务器
首先说下Apache和Tomcat的区别: 相同点:1.两者都是apache组织开发的 2.两者都有HTTP服务的功能 3.两者都是免费的 不同点:Apache是web服务器,专门提供HTTP服务的, ...
- rabbitmq的问题Failed to start bean 'listenerContainer'
第一次使用mq发送消息,启动报错了,网上看了好多也没找到几个相关论坛,好几个置顶的都是发帖后不说明解决方案的.因此在这里记录一下. 原因: 因为消息监听的地址在mq服务中没有对应的q, 解决: 需要手 ...
- PyCharm for windows 快捷功能(图片形式讲解)
- redis学习——数据持久化
一.概述 Redis的强大性能很大程度上都是因为所有数据都是存储在内存中的,然而当Redis重启后,所有存储在内存中的数据将会丢失,在很多情况下是无法容忍这样的事情的.所以,我们需要将内存中的数据持久 ...
- vscode 创建.net core项目初体验
微软的virtual studio编辑器那是宇宙第一大编辑器,可惜就是太笨重,遇到性能差一些的电脑设备,简直无法快速的编辑项目. 而vs code编辑器轻便易用,想要编辑哪种项目,只需扩展插件就OK, ...
- Java实训:实训一 ——长春职业技术学院 16级网络工程
Java实训:实训一 本文会解释一些设计思路. 想看具体过程,请转:https://www.cnblogs.com/lxwlxw/p/10114187.html 笑维的码云项目命名不太对,所以我来:h ...