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 ...
随机推荐
- nginx反向代理出错:proxy_pass
问题描述: 一台服务器代理访问另一台服务器,代码如下图所示: 重新加载nginx后不会跳到该域名,而是出现error的页面. 查看error.log日志为以下报错: 2021/03/09 23:07: ...
- java 必应壁纸批量下载
基于java 必应壁纸批量下载 - rookie丶k - 博客园 (cnblogs.com)实现 上面代码运行本地有点小问题,改了改 1.ssl验证 2.请求头 3.需要优化下载速度,多线程方式(还不 ...
- vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You
这是因为你安装的是2.9的版本用了3.0的命令 解决方法:1.用2.9的命令初始化项目 vue init webpack my-project 2.卸载2.9升级到3.0
- Python字符出现次数统计
1.读取文本文档 红球.txt 2.运行代码 with open('红球.txt', "r", encoding="utf-8")as f: d = {} fo ...
- FJD1T1
在考场上因为一些原因,系统编译不了. 于是在最后\(1h\)把\(T3\)得重打一遍,所以这题的暴力没有写完. 不过也确实很蠢,没想到做法. 考虑搜索原串中的字母的对应取值,然后计算出结果的柿子. 考 ...
- curl实现SFTP上传下载文件
摘自:https://blog.csdn.net/swj9099/article/details/85292444 #include <stdio.h> #include <stdl ...
- DirectX12 3D 游戏开发与实战第九章内容(上)
仅供个人学习使用,请勿转载. 9.纹理贴图 学习目标: 学习如何将局部纹理映射到网格三角形上 探究如何创建和启用纹理 学会如何通过纹理过滤来创建更加平滑的图像 探索如何使用寻址模式来进行多次纹理贴图 ...
- 分布式事务(3)---强一致性分布式事务Atomikos实战
分布式事务(1)-理论基础 分布式事务(2)---强一致性分布式事务解决方案 分布式事务(4)---最终一致性方案之TCC 前面介绍强一致性分布式解决方案,这里用Atomikos框架写一个实战的dem ...
- MapReduce02 序列化
目录 MapReduce 序列化 概述 自定义序列化 常用数据序列化类型 int与IntWritable转化 Text与String 序列化读写方法 自定义bean对象实现序列化接口(Writable ...
- 基于MQTT协议实现远程控制的"智能"车
智能,但不完全智能 虽然我不觉得这玩意儿有啥智能的,但都这么叫就跟着叫喽. 时隔好几天才写的 其实在写这篇博文的时候我已经在做升级了,并且已经到了中后期阶段了. 主要是业余时间做着玩,看时间了. 规格 ...