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: ' ...
随机推荐
- pta
一:实验代码 include <stdio.h> char theValue[10] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j ...
- 【C/C++】C++11 Variadic Templates
Variadic Templates 1.function template:利用“参数个数逐一递减”的特性,实现递归函数调用 template <typename T, typename... ...
- python note 4
1.使用命令行打开文件 t=open('D:\py\123.txt','r') t.read() 在python和很多程序语言中""转义符号,要想输出\要么多加一个\写成\ 要么在 ...
- K8S配置安装全过程
V1.11.1https://github.com/kubernetes/kubernetes/releases/tag/v1.11.1环境准备:系统:centos7.2.1511[root@mast ...
- springboot秒杀课程学习整理1-1
1)新建一个maven工程quickStart,然后在pom文件里添加依赖 <parent> <groupId>org.springframework.boot</gro ...
- My third homework
题目要求 定义一个包含有10个整数的数组a并初始化,定义一个指针变量p,p指向数组a,定义函数fun,要求在fun内部访问数组,并打印出数组中各元素的值,要求在fun函数内不要出现数字10. 代码: ...
- emacs安装及配置
目录 平台 安装 基本配置 配置文件结构 elpa仓库管理 主题配色 字体显示配置(解决中文卡顿) 插件配置 markdown 简介 markdown-mode markdown-toc org导出m ...
- git命令提交新项目
新建的项目没有与git关联过git initgit add .git commit -m "注释"git remote add origin 新SSH:URLgit push -f ...
- FX-玩列表
list = []while True: meus = ("1.查看","2.添加","3.删除","0.退出") pr ...
- Ubuntu16.04下安装OpenCV3.2.0
1.安装官方给的opencv依赖包 $ sudo apt-get install build-essential $ sudo apt-get install cmake git libgtk2.0- ...