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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
validform表单验证的实现方法
Mar 08 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python threading多线程编程实例
2014/09/18 Python
python生成验证码图片代码分享
2016/01/28 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
农民入党思想汇报
2014/01/03 职场文书
共青团员自我评价
2015/03/10 职场文书
旷工检讨书大全
2015/08/15 职场文书
安全学习心得体会范文
2016/01/18 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js