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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 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
第十一节--重载
2006/11/16 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python支付宝支付示例详解
2019/08/22 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
应用数学专业求职信
2014/03/14 职场文书
大学生英语演讲稿
2014/04/24 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
文明单位申报材料
2014/12/23 职场文书
国博复兴之路观后感
2015/06/02 职场文书
人代会简报
2015/07/21 职场文书
教师研修随笔感言
2015/11/18 职场文书