vue 带参数跳转_vue跳转页面的几种方法

vue 带参数跳转_vue跳转页面的几种方法vue2.0在使用的过程中,.vue文件之间的跳转,在template中的常见写法是:<router-linkto="/miniCard/statement/horizon"><buttonclass="btnbtn-defaultcolorDe">继续</button>&l

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

1.页面跳转的两种方法

// 1.使用path跳转
  pathTo () { 
   
      this.$router.push({ 
   
          path: '/b'
      })
  },
  // 2.使用name跳转
  nameTo () { 
   
      this.$router.push({ 
   
          name: 'b'
      })
  }

Jetbrains全家桶1年46,售后保障稳定

2.页面传参以及获取

// 使用path跳转,使用query传参,参数会拼接到url里面。缺点是刷新页面参数会丢失。b页面通过 this.$route.query 获取
   pathTo () { 
   
       this.$router.push({ 
   
           path: '/b',
           query: { 
   
               b: 'a页面的参数'
           }
       })
   },
   /* 使用name跳转,可以使用两种方式传参。 * 1.使用query传参,参数会拼接到url里面。缺点是刷新页面参数会丢失。b页面通过 this.$route.query 获取 * 2.params,b页面通过 this.$route.params 获取。类似于post传参,参数不会丢失 * */ 
   nameTo () { 
   
       this.$router.push({ 
   
           name: 'b',
           params: { 
   
               a: 'a页面的参数'
           },
           query: { 
   
               b: 'a页面的参数'
           }
       })
   }
  

在这里插入图片描述

// 使用path跳转,通过占位符形式,将参数拼接到路由里面,需提前在route里面定义,如上图。b页面通过 this.$route.query 获取,刷新页面参数不会丢失
   pathTo () { 
   
       this.$router.push({ 
   
           path: '/b/11'
       })
   }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/215463.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 矩阵范数小结_f范数

    矩阵范数小结_f范数稍微总结一下矩阵范数的求解来放松一下身心吧~这里总结的矩阵范数主要是F范数、1范数、2范数、核范数以及全变分TV范数与1、2的搭配

  • Nexus 3的搭建和简单使用介绍

    搭建Nexus 3私服一、简介nexus 私服间于本地仓库和中央仓库直接。1、有两种安装方式:使用tomcat启动,Tgz使用自带的Jetty启动 ,zip包(推荐使用)2、下载地址 : Nexus oss3、环境准备: jdk8+ + maven3+二、安装步骤1、windos上安装– nexus 2.x 版本1、将bin添加到环境变量中,nexus2、修改/bin…

  • IOC 控制反转[通俗易懂]

    IOC 控制反转[通俗易懂]SpringFramework概述https://blog.csdn.net/centrl/article/details/115519480通过前面的学习,我们至少已经知道IOC,下面我们就来说说IOC是个什么东西。1.写在前面首先来想一件事,作为程序员,怎么开发程序才最巴适?我觉得最起码有两点:开发简单、升级简单。开发简单,就是我们只管写业务逻辑(培养只会写if-else的程序员)。 升级简单,这里也包含两点:我们使用的技术(可理解为框架)出了什么问…

  • 让你的网页更精彩 – Javascript 调用MSAgent

    让你的网页更精彩 – Javascript 调用MSAgent<!–让你的网页更精彩–MicrosoftAgent在网页上的简单应用(本文假设您使用WindowsXP或Windows2000操作系统)不知在你漫游互联网时可曾在他开某个网页时看到一个小巫师,蓝色的袍子上满是金黄的星星和月亮十分可爱。他会向你问好,给你介绍这个网站。你一定奇怪,那个巫师是怎么做出来的。其实他并不是网页实现的而是微软的一…

  • Apache Struts2更新到新版本(2.5.22)

    Apache Struts2更新到新版本(2.5.22)前两天接到阿里云那边的一个远程命令执行漏洞(S2-046)和(S2-45)的通知,上面说建议更新Struts2框架到最新版。老项目没有用pom.xml管理jar包的,所以只好把Struts2的相关东西都给更新一下咯,在Struts2官网上查到目前最新(2019年12月)的是2.5.22,我先把官网上的示例下载下来,看看里面的jar包解压后在lib文件夹下的东西看了一下,挑选了一下就直接替换掉原…

  • 如何面对大容量的数据存储问题_最安全的数据存储方式

    如何面对大容量的数据存储问题_最安全的数据存储方式公司在高速发展中,总会遇到各种各样的网络问题,今天笔者和大家分享一个“公司网站存储需求”的实际案例。 案例背景客户公司网站的存储需求越来越大,已有NAS存储服务器的空间不能满足业务日趋增长的需求,此时网站面临如下问题: 网站存储扩容需要另行申请采购和做规划采购,需要一定周期才能使用,无法解决燃眉之急; 网站的视频资源访问速度慢; 已有存储NAS存储使用时间长,…

发表回复

您的电子邮箱地址不会被公开。

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