vue跳转页面详解

vue跳转页面详解vue 跳转页面详解

Vue支持的跳转:

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由(以下两图分别是this.$router、this.$route对象)。

vue跳转页面详解

vue跳转页面详解

跳转到相应的页面我们使用this.$router.push

 // 不带参数 this.$router.push('index/') // 带参数 this.$router.push({name:'login', params:{userId: 'user',password:'123'}}) this.$router.push({path:'folder', query:{folderId:'1'}})

需要注意的是由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。query和params区别是:query 相当于 get 请求,页面跳转的时候可以在地址栏看到请求参数,params 相当于 post 请求,参数不在地址栏中显示。

 
  
    to apple 
   
  
    url 
   
  
    folder 
  

 


window.open跳转

vue跳转只支持单页面跳转,当需求跳转时打开新页面需要使用window.open,使用方法具体使用方法可在菜鸟教程中查看,这里给出在新Tab页中打开和新window中打开的例子

 //在新Tab中打开 openUrlInNewTab(url) { this.blurButton() if (!url.startsWith('/')) { url = '/' + url } window.open(url) }
 // 在新window中打开 openUrlInNewWindow( url, features = ['resizable', 'scrollbars', 'width=832', 'height=1200']) { if (!url.startsWith('/')) { url = '/' + url } window.open(url, '_blank', features.join()) },

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/226697.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午10:19
下一篇 2026年3月16日 下午10:20


相关推荐

  • SQL存储过程使用介绍

    SQL存储过程使用介绍在数据库编程过程中经常会用到存储过程 相比 SQL 语句 存储过程更方便 快速 安全 先将存储过程的相关介绍和使用方法总结如下 1 存储过程的概念存储过程 StoredProced 是在大型数据库系统中 一组为了完成特定功能的 SQL 语句集 存储在数据库中 经过第一次编译后再次调用不需要再次编译 用户通过指定存储过程的名字并给出参数 如果该存储

    2026年3月26日
    2
  • 前端页面的整合_web前端开发是什么

    前端页面的整合_web前端开发是什么前端页面的整合

    2022年4月22日
    46
  • Linux/Ubuntu系统下调用的Pycharm闪退但仍在占用问题

    Linux/Ubuntu系统下调用的Pycharm闪退但仍在占用问题Linux 系统下调用的 Pycharm 闪退但仍在占用问题有些时候 LInux 系统下调用了 Pycharm 但是程序跑着跑着突然闪退 回到工作目录再次输入 shpycharm sh 的时候会显示 Alreadyrunni 如下图 Pycharm 在占用系统资源 但是我们并不能找到 Pycharm 的界面 亲测成功的解决方法如下 在工作目录下 也就是 pycharm 版本号 sh 这个文件的路径中 输入 ps u 按回车 注意 ps 和 u 之间有一个空格可以查看 CPU 占用情况完整截图如下

    2026年3月27日
    3
  • Latex 参考文献格式

    Latex 参考文献格式在Latex中,一般使用.bib文件,维护一个参考文献库,对于中英文要求文后的参考文献显示格式不同,我们仅需要修改.tex文件中的引用格式即可。一.对于中文文章,参考文献格式一般要求按照下面的格式进行排版显示格式一般为(举个例子):在Latex中,我们仅需要修改两处:1.在\begin{document}前面加上\usepackage[numbers]{gbt7714}2.在后面参考文献处写上:{\small \bibliographystyle{gbt7714-nume

    2025年10月13日
    11
  • Python range 函数 – Python零基础入门教程

    Python range 函数 – Python零基础入门教程目录一.Pythonrange函数简介二.Pythonrange函数使用1.Pythonrange函数常规使用2.Pythonrange函数在for循环中使用三.猜你喜欢

    2022年7月5日
    25
  • Objective-C的对象模型和runtime机制「建议收藏」

    Objective-C的对象模型和runtime机制

    2022年2月5日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号