vue路由跳转之【编程式导航与传参】

vue路由有两种跳转方式 ----> 编程式与声明式,本文重点讲解vue路由的【编程式导航 】【编程式导航传参 ( 查询参数传参 & 动态路由传参 ) 】等内容,并结合具体案例让小伙伴们深入理解 ,彻底掌握!创作不易,需要的小伙伴 关注+收藏 哦~❣️

 💟 上一篇文章 vue路由跳转之【声明式导航与传参】(热榜前十)

📝 系列专栏 vue从基础到起飞

声明:图片资源部分来自于黑马程序员公开学习资料
本人在过去的学习当中,详细整理了笔记,供大家参考学习
 

目录

一、编程式导航-两种路由跳转方式

1.问题

2.方案

3.语法

4.path路径跳转语法

5.name命名路由跳转

二、编程式导航-path路径跳转传参

1.问题

2.两种传参方式

3.传参

4.path路径跳转传参(query传参)

5.path路径跳转传参(动态路由传参)

三、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

2.name 命名路由跳转传参 (动态路由传参)

一、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现?

2.方案

编程式导航:用JS代码来进行跳转

3.语法

两种语法:

  • path 路径跳转 (简易方便)

  • name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点:简易方便

  //简单写法this.$router.push('路由路径')​//完整写法this.$router.push({path: '路由路径'})

5.name命名路由跳转

特点:适合 path 路径长的场景

语法:

  • 路由规则,必须配置name配置项

      
      { name: '路由名', path: '/path/xxx', component: XXX },
  • 通过name来进行跳转

      this.$router.push({name: '路由名'})

二、编程式导航-path路径跳转传参

1.问题

点击搜索按钮,跳转需要把文本框中输入的内容传到下一个页面如何实现?

2.两种传参方式

1.查询参数

2.动态路由传参

3.传参

两种跳转方式,对于两种传参方式都支持:

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参(query传参)

  //简单写法this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')//完整写法this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}})

接受参数的方式依然是:$route.query.参数名

5.path路径跳转传参(动态路由传参)

  //简单写法this.$router.push('/路径/参数值')//完整写法this.$router.push({ path: '/路径/参数值'})

接受参数的方式依然是:$route.params.参数值

注意:path不能配合params使用

三、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

  this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}})

2.name 命名路由跳转传参 (动态路由传参)

  this.$router.push({name: '路由名字',params: {参数名: '参数值',}})

🚀 个人简介:6年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~
💟 作    者:前端菜鸟的自我修养❣️
📝 专    栏:vue从基础到起飞
🌈 若有帮助,还请 关注➕点赞➕收藏,不行的话我再努努力💪💪💪   

下一篇讲解 ---- 【缓存组件keep-alive 】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/19503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年全球DDoS攻击现状与趋势分析

天翼安全科技有限公司副总工程师、运营保障部总经理陈林表示,2023年扫段攻击频次快速增长,成为网络基础设施面临的最大威胁。为躲避防御,低速扫段攻击成为主流达到攻击总数的73.19%;43.26%的C段攻击持续时间小于5分钟,…

Linux中部署MinIO

Linux中部署MinIO 下载MinIO可执行程序: wget https://dl.min.io/server/minio/release/linux-amd64/minio 添加执行权限: chmod x minio 创建存储目录,例如/data: mkdir -p /data 运行MinIO服务器,需要设置MIN…

【设计模式】JAVA Design Patterns——Factory Method(虚拟构造器模式)

🔍目的 为创建一个对象定义一个接口,但是让子类决定实例化哪个类。工厂方法允许类将实例化延迟到子类 🔍解释 真实世界例子 铁匠生产武器。精灵需要精灵武器,而兽人需要兽人武器。根据客户来召唤正确类型的铁匠。 通俗描述 它为类…

三维前端项目中用THREEWebGLRenderer于创建渲染器对象

在三维前端项目开发中,可以使用THREE.WebGLRenderer创建渲染器对象。艾斯视觉作为行业ui设计与前端开发服务商很高兴能在这里与你共同探讨:THREE.WebGLRenderer是 Three.js 库中用于将 3D 场景渲染到屏幕上的类。以下是一个示例代码,展示了如…

element中table的selection-change监听改变的那条数据的下标

<el-table ref"table" :loading"loading" :data"tableData" selection-change"handleSelectionChange"></el-table>当绑定方法selection-change&#xff0c;当选择项发生变化时会触发该事件 // 多选框选中数据handleSele…

truncate IDL_UB1$导致数据库open hang---惜分飞

在一次数据库恢复中,发现IDL_UB1$表被truncate,然后数据库在open过程中会hang住,而且不报任何错误,这里通过试验进行重现.对于这类问题,以前有过类似处理测试&#xff1a;truncate IDL_UB1$恢复试验数据库版本 SQL> select * from v$version; BANNER ---------------------…

vivado原语使用

首先介绍一下原语&#xff1a;其英文名字为Primitive。原语是Xilinx针对其器件特征开发的一系列常用模块的名字&#xff0c;用户可以将其看成Xilinx公司为用户提供的ip&#xff0c;是芯片中的基本元件&#xff0c;代表FPGA中实际拥有的硬件逻辑单元&#xff0c;如LUT&#xff0…

汇编:x86汇编环境搭建与基础框架(32位)

32位汇编代码编写环境&#xff1a;Visual Studio&#xff08;笔者用的版本为2017&#xff09;&#xff1b;先来说一下在Visual Studio 2017中编写汇编代码的准备操作&#xff1a; ①创建空项目 ②设置项目属性&#xff1a;平台工具集设置为Visual Studio 2015(v140)&#xff0…

YOLOv5改进 | 注意力机制 | 添加三重注意力机制 TripletAttention【原理 + 完整代码】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 得益于在通道或空间位置之间建立相互依赖关系的能力&#xff0c;近年来&#xff0c;注意力机制在计算机视觉任务中得到了广泛的研究和应用。…

嵌入式Linux命令基础

一、命令概述 1. 命令本质 命令的特性&#xff1a;一般就是对应shell命令&#xff0c;每一个命令代表一个可执行程序&#xff0c;运行一个命令就相当于 运行一个可执行代码。 2. 打开终端方法 第一种方法&#xff1a;通过鼠标右键选择打开终端 第二种方法&#xff1a;利用…

Django——Admin站点(Python)

#前言&#xff1a; 该博客为小编Django基础知识操作博客的最后一篇&#xff0c;主要讲解了关于Admin站点的一些基本操作&#xff0c;小编会继续尽力更新一些优质文章&#xff0c;同时欢迎大家点赞和收藏&#xff0c;也欢迎大家关注等待后续文章。 一、简介&#xff1a; Djan…

认识Oracle v$mystat视图

v$mystat就是当前用户的各种统计信息&#xff0c; sid就是session的id(也就是当前用户),STATISTIC#就是统计量的编号(用来唯一确定统计量的名称)&#xff0c;value是统计量的值&#xff1b; desc命令在Oracle中通常用于查看表结构&#xff1b; v$mystat视图中只会有当前用户…

【NVM】nvm常用命令,切换node版本命令

nvm常用的命令&#xff0c;切换node版本命令 nvm 查看支持安装的node版本 nvm list available nvm安装指定版本node nvm install 版本号 例如&#xff1a;nvm install 10.24.1 nvm查看本机安装所有node版本 nvm list nvm切换node版本 nvm use 10.24.1 检测当前node版本 node -…

大数据中的电商数仓项目:探秘业务的核心

我学习完一个电商数仓的项目和电影实时推荐项目&#xff0c;便兴冲冲的去面试大数据开发岗&#xff0c;在面试的时候&#xff0c;面试官总是喜欢问&#xff0c;聊聊你为什么要做这个项目以及你这个项目有哪些业务&#xff1f; 我心想&#xff0c;为什么要做这个业务&#xff1f…

【码银送书第二十期】《游戏运营与出海实战:策略、方法与技巧》

市面上的游戏品种繁杂&#xff0c;琳琅满目&#xff0c;它们是如何在历史的长河中逐步演变成今天的模式的呢&#xff1f;接下来&#xff0c;我们先回顾游戏的发展史&#xff0c;然后按照时间轴来叙述游戏运营的兴起。 作者&#xff1a;艾小米 本文经机械工业出版社授权转载&a…

用Idea 解决Git冲突

https://intellijidea.com.cn/help/idea/resolving-conflicts.html https://www.jetbrains.com/help/idea/resolve-conflicts.html idea 官方文档 当您在团队中工作时&#xff0c;您可能会遇到这样的情况:有人对您当前正在处理的文件进行更改。如果这些更改没有重叠(也就是说…

Ps系统教程03

选区工具的组合使用 先用魔棒将大致区域点击圈主 会发现一些零散的小区域 使用套索工具进行区域的加减&#xff08;按住shift/alt键进行相关区域加减&#xff09; 可以放大查看 基本处理完细节之后 如果把不用的填充背景直接按delete删除&#xff0c;那么原版图案就会…

Hadoop3:MapReduce的序列化和反序列化

一、概念 1、序列化 就是把内存中的对象&#xff0c;转换成字节序列 &#xff08;或其他数据传输协议&#xff09;以便于存储到磁 盘&#xff08;持久化&#xff09;和网络传输。 2、反序列化 就是将收到字节序列&#xff08;或其他数据传输协议&#xff09;或者是磁盘的持…

LeetCode-47 全排列Ⅱ

LeetCode-47 全排列Ⅱ 题目描述解题思路代码说明 题目描述 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 &#xff1a; 输入&#xff1a;nums [1,1,2]输出&#xff1a; [[1,1,2], [1,2,1], [2,1,1]] b站题目解读讲的不好&…

部署k8s的DashBoard

1. 部署 Dashboard UI [rootk8s-master ~]# kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.7.0/aio/deploy/recomme nded.yaml一般上面的网站访问不了 可以下载我上传的资源DashBoard的recommended.yaml vim recommended.yaml 复制粘贴我上…