Vue this.$router.push(参数)实现页面跳转操作


Posted in Javascript onSeptember 09, 2020

很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 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

补充知识:vue this.$router.push('./map');无法跳转的问题

<template>
 <div style="text-align: center">
  <el-button type="primary" style="margin-top: 40vh" @click="onLogin">登录</el-button>
 </div>
</template>
<script>
 export default {
  name: 'login',
  data () 
   return {
   }
  },
  methods: {
   onLogin:function () {
    this.$router.push('./map');
   }
  },
 }
</script>
<style scoped>
  
</style>

router中是这样引入的

import map from '@components/map'

点击事件无法跳转

2.解决方法:

改变引入方式

import map=r=>require.ensure([],()=>(require('../components/map')),'map')

这样通过静态引入就没问题了!

以上这篇Vue this.$router.push(参数)实现页面跳转操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
JS array数组检测方式解析
May 19 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
You might like
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
pytorch实现线性拟合方式
2020/01/15 Python
python实现串口通信的示例代码
2020/02/10 Python
请解释virtual关键字的含义
2015/06/17 面试题
三好学生自我鉴定
2013/12/17 职场文书
幼儿教师考核制度
2014/01/25 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫