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 (二) 万能的选择器
Oct 01 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 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获取从html表单传递数组的方法
2015/03/20 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
python获取中文字符串长度的方法
2018/11/14 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
工艺工程师工作职责
2013/11/23 职场文书
超级搞笑检讨书
2014/01/15 职场文书
初中语文教学反思
2014/02/02 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
项目合作协议书
2014/04/16 职场文书
大班亲子运动会方案
2014/06/10 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
倡议书作文
2015/01/19 职场文书
银行自荐信怎么写
2015/03/05 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
校园运动会广播稿
2015/08/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Python实现双向链表基本操作
2022/05/25 Python