Vue中this.$router.push(参数) 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。
push 后面可以是对象,也可以是字符串:
// 字符串
this.$router.push('/home/first')
// 对象 query相当与发送了一次get请求,请求参数会显示在浏览器地址栏中
this.$router.push({ path: '/home/first' })
// 命名的路由 params相当与发送了一次post请求,请求参数则不会显示,并且刷新页面之后参数会消失
this.$router.push({ name:'Login', params: { id: this.id } ) // 当路由配置更改为
//路由配置: //{path:'/login/:id',name:'Login',component:Login} //并且再次发送请求,请求数据不会随着页面的刷新而消失
跳转页面并传递参数的方法:
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
写在最后:关于vue路由还有很多方式,简单总结,如有不对欢迎大佬们指正!!!
Vue中this.$router.push(参数) 实现页面跳转的更多相关文章
- Vue中this.$router.push参数获取
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...
- Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- vue.js 中this.$router.push()的使用
在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- 解决vue-router中this.$router.push无法在新窗口中打开
解决vue-router中this.$router.push无法在新窗口中打开 let routeData = this.$router.resolve({ path: '/consult', que ...
随机推荐
- [loj2470]有向图
参考ExtremeSpanningTrees,考虑优化整体二分时求$g_{i}\in \{w_{mid},w_{mid+1}\}$的最优解 对于$m=n-1$的问题,不需要去网络流,可以直接树形dp ...
- 17 款程序员必备 Chrome扩展插件,爱了爱了!
整理:小哈学Java 目录 美化 Just Black 午夜黑官方主题 Dark Reader 暗黑主题 为什么你们就是不能加个空格呢? 标签管理 Momentum [新标签页] Tab Manage ...
- Codeforces 434E - Furukawa Nagisa's Tree(三元环+点分治)
Codeforces 题面传送门 & 洛谷题面传送门 场号 hopping,刚好是我的学号(指 round 的编号) 注:下文中分别用 \(X,Y,K\) 代替题目中的 \(x,y,k\) 注 ...
- 洛谷 P1224 - [NOI2013] 向量内积(随机化)
洛谷题面传送门 一道很神的随机化. 首先由于我们要求向量点乘 \(\bmod k\) 的值,因此我们可以将所有 \(x_{i,j}\) 都模上 \(k\),显然该操作不影响结果正确性. 注意到这里的 ...
- MongoDB 安装/启动/基本操作命令
1.MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系型数据库和非关系数据库之间的 ...
- 利用plink软件基于LD信息过滤SNP
最近有需求,对WGS测序获得SNP信息进行筛减,可问题是测序个体少,call rate,maf,hwe,等条件过滤后,snp数量还是千万级别,所以后面利用plink工具根据LD信息来滤除大量SNP标记 ...
- git的使用理解(分支合并的使用理解,多人编程的解决方案)
本文主要记录了对git日常使用的一些理解,主要是对git分支的一些感悟. git强大的版本控制系统,之前也使用过SVN,感觉上git对于多人开发的版本控制更加强大,特别是最近对git分支的使用,更是深 ...
- C++栈溢出
先看一段代码 #include<iostream> using namespace std; #define n 510 void sum(int a,int b) { cout<& ...
- 商业创新不能等?用友低代码开发平台YonBuilder为您加速!
随着云计算.人工智能.物联网.大数据.5G等新一代技术的快速发展,越来越多的企业希望借助技术的力量加速数智化转型,期许通过更加敏捷和强大的应用系统推动企业的商业创新速度.但传统软件开发周期长.开发成本 ...
- 日常Java 2021/10/11
抽象类 所有对象都是通过类描述的,但不是所有的类都是用来描述对象,就好比抽象类,此类中没有足够的信息描述一个对象. 抽象类不能实例化对象,所以抽象类必须的继承,才可以使用. 抽象方法 Abstract ...