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: ' ...
随机推荐
- YouTuboba视频搬运~哔哩哔哩
将YouTube上面的视频搬运到哔哩哔哩上面教程 1.首先选择YouTube上面一个视频,需要谷歌登录,然后保存这个视频播放链接. 2.在浏览器中输入这个网址:en.savefrom.net,点击En ...
- 新建ui文件及相应.h和.cpp文件
1.在Qt Creator中新建一个任意的项目(如untitled): 2.在该项目中添加QT设计师界面类: 3.将新建的3个文件(.ui..h..cpp)拷贝到目标项目文件夹中: 4.分别在目标 ...
- Vue.js安装使用教程
一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...
- Java 开发笔记
共同学习,以下内容,随时更新. 前端 1.前端页面'是单引号的转义符,"是双引号. 问题(前端JS进行参数传递时,使用的是单引号扩住变量,但是变量形式为 2019-27 ...
- Sublime自动去除代码行尾多余的空格
Preferences - > Settings - User 加入: "trim_trailing_white_space_on_save": true Ctrl+s就会自 ...
- springboot配置视图控制器
实现WebMvcConfigurer接口 /** * @descripte 配置自己的视图解析器 */@Configurationpublic class MyViewConfigController ...
- GDAL——命令使用专题——gdalinfo命令
GDAL——命令使用专题——gdalinfo命令 前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用 ...
- 如何安全的捂住你的AngelToken钱包
Angel Token钱包的重要性 AngelToken基于区块链底层技术的去中心化.安全可靠的特点,开发了数字资产钱包,是行业领先的中心化token钱包和去中心化交易平台相结合的链数字资产智能钱包. ...
- java字符串截取指定下标位置的字符串
public class A { public static void main(String[] args) { //定义的字符串 String s = "Hello World" ...
- git切换用户踩坑
1)配置用户信息 git config --global user.name "username" git config --global user.email "**@ ...