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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
js获取域名的方法
Jan 27 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php 随机排序广告的实现代码
2011/05/09 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
asm.js使用示例代码
2013/11/28 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python生成二维码的实例详解
2017/10/29 Python
Django实现学员管理系统
2019/02/26 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
项目副经理岗位职责
2013/12/30 职场文书
表扬信格式
2014/01/12 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
优秀员工事迹材料
2014/12/20 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
python 提取html文本的方法
2021/05/20 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle