vue --- 路由传参的几种方式
2024-08-24 21:02:12
方案一:
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 这很重要~~~
最新文章
- PMBOK(第五版)学习笔记二-十大知识领域(P87)
- redis主从复制操作
- C语言二维数组中的指针问题
- JDBC题库
- javascript Math.pow 函数 详解
- Web应用程序状态管理(上)
- tty -s &;&; mesg n
- PowerDesigner(五)-概念数据模型(CDM生成LDM,PDM和OOM)(转)
- 网络攻击之二:XSS(之一是SQL注入,前面有文章)
- 树中是否存在路径和为 sum leecode java
- HDU 4937 Lucky Number 规律题_(:зゝ∠)_
- SQL Server 数据的添加修改删除和查询
- 防SQL注入:生成参数化的通用分页查询语句
- 内功心法 -- java.util.ArrayList<;E>; (4)
- DOCKER 从入门到放弃(三)
- 如何在jenkins上新建一个项目及其简单配置
- ADO.NET之Parameter属性
- element框架中表格的筛选功能使用说明(转载)
- Java覆盖
- OpenMax概述
热门文章
- LeetCode211:Add and Search Word - Data structure design
- 一步一步跟我学习hadoop(7)----hadoop连接mysql数据库运行数据读写数据库操作
- iOS-UIImage imageWithContentsOfFile 和 imageName 对照
- 百度 谷歌 Twitter,这么多短链接服务(Short Url)究竟哪家强?
- Solaris 10 改ip參考文档之二
- Binary Indexed Tree
- 21.boost Ford最短路径算法(效率低)
- hexo创建的tags和categories页面为空的解决办法
- Linux java9 jshell操作
- PHP正则表达式函数总结