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 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
玩转图像函数库―常见图形操作
2006/09/03 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue vant Area组件使用详解
2019/12/09 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python图片合成的示例
2020/11/09 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
采购主管的岗位职责
2013/12/17 职场文书
公益活动策划方案
2014/01/09 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技