代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 技术文章 网页制作 正文

Vue this.$router.push(参数)实现页面跳转操作

时间:2020-09-24 [网页制作]作者:adminjie 浏览:148 次

很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 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(参数)实现页面跳转操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。


转载请注明来源:Vue this.$router.push(参数)实现页面跳转操作

本文永久链接地址:https://www.adminjie.com/post/3937.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 代码之家会员升级
  • 最新文章
  • 阿里云大优惠
  • 热门文章