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小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- 微信开发者工具Error: unable to verify the first certificate
- 基于php+MySql实现学生信息管理系统实例
- win10如何用自带迁移工具迁移系统?
- wps表格下拉数字无法递增怎么办?
- IntelliJ IDEA 2020 安装和常用配置(推荐)
- 在html语言中,单元格的标记是什么
- 常见的几款Webshell检测工具分享
- 带你总结laravel框架使用中的错误及解决办法
- html5不常用标签可以怎么使用?
- 如何完全卸载nginx
- C++多线程获取返回值方法详解
- centos出现ssh登录失败怎么办
- 微信小程序实现身份证取景框拍摄
- css如何实现模糊背景效果
- php如何删除数组中的第一个元素

- 最新文章
-
-
dedecms织梦图片集上传按钮消失的解决方法
对于不是很熟悉建站的站长朋友来说,对于某些功能的失效就感觉到手慌脚乱的,但是麦站小编要告诉站长朋友们的是,当出现问题的时候一定要冷静的下来进行分析问题的所在,而...
-
DeDecms织梦发布文档取消自动生成关键字
简单的说,关键字就是用户在使用搜索引擎时,输入的能够最大程度概括用户所要查找的信息内容。在搜索引擎优化SEO行业谈到的关键字,往往是指网页的核心和主要内容。对于...
-
js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果js+h5canvas实现图片验证码一、使用技术原生js...
-
H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下H5+css3+js搭建带验证码的登录页面login.html<!...
-
Python批量获取并保存手机号归属地和运营商的示例
从Excel读取一组手机号码,批量查询该手机号码的运营商和归属地,并将其追加到该记录的末尾。...
-

- 热门文章
-
-
微信开发者工具Error: unable to verify the first certificate
解决Error:unabletoverifythefirstcertificate当前win10系统跳坑总结:①想彻底干掉ProxyEnable注...
-
基于php+MySql实现学生信息管理系统实例
php大作页,使用php+mysql技术,实现了基本的分页,信息查询,修改,增加,删除操作有以下几个基本页面登录页面首页修改学生基本信息修改学生学籍信息修改学生...
-
win10如何用自带迁移工具迁移系统?
win10用自带迁移工具迁移系统的方法:步骤一:备份系统1.打开系统【备份和还原(Windows7)】功能【控制面板】→【系统和安全】→【备份和还原(Wind...
-
wps表格下拉数字无法递增怎么办?
wps表格下拉数字无法递增的解决办法:1、如数据,从中拉下来做增量序列。将鼠标放在单元格的右下角,当它变成十字形时单击并向下拉。2、看到默认序列格式是相同的数字...
-
IntelliJ IDEA 2020 安装和常用配置(推荐)
这篇文章主要介绍了IntelliJIDEA2020安装和常用配置(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...
-