首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
elementui 页面跳转
10580
人阅读
2022/9/27 21:44
总访问:
871714
评论:
0
收藏:
1
手机
分类:
前端
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。 push 后面可以是对象,也可以是字符串: ``` // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId: wise }}) ``` 跳转页面并传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数: ``` /* router.js 文件*/ import Vue from "vue"; import Router from "vue-router"; import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表 Vue.use(Router); export default new Router({ routes: [ /* 进行路由配置 */ { name: "MediaSecond", path: "/MediaSecond", component: MediaSecond }, ] }) /* 后面还需要接一空行,否则无法通过 ESlint 语法验证 */ ``` 通过name获取页面,传递params: ``` this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} }) ``` 在目标页面通过this.$route.params获取参数: ``` if (this.$route.params.type == 2) { this.type = apis.getAtistDetails; } else { this.type = apis.getMessageList; } ``` 2.Query 页面通过path/name和query传递参数,该实例中row为某行表格数据 ``` this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } }); this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } }); ``` 在目标页面通过this.$route.query获取参数: this.$route.query.type 原文: https://blog.csdn.net/yang295242361/article/details/104822652
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}