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

ops/2025/2/16 1:26:15/
aidu_pl">

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

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

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

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

ain-toc">目录

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

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.ppmy.cn/ops/45558.html

相关文章

比较好的Python课程

最近在学习夜曲编程的Python进阶课程——办公效率化;夜曲编程之前有推出一款学习Python的入门课程,在手机端和电脑端都可以学习的,如果没有时间在手机端学习都很好的。每节课程学习下来,可以收集到Python入门的知识卡片&#xff0…

第十七节:带你梳理Vue2: Vue组件的认识,创建和使用

1. 认识Vue组件 组件系统是 Vue 的另一个重要概念,它是一种抽象的概念,类似于积木中的一块块小积木,通过这些小积木拼接成一个大的模型. 组件系统就是将页面一块小的区域处理为一个组件,我们使用这些小型、独立和可复用的组件构建大型应用。 仔细想想…

基于Pytorch框架的深度学习EfficientNetV2神经网络中草药识别分类系统源码

第一步:准备数据 5种中草药数据:self.class_indict ["百合", "党参", "山魈", "枸杞", "槐花", "金银花"] ,总共有900张图片,每个文件夹单独放一种数据 第二步&a…

Mac连接虚拟机(Linux系统)

1.确定虚拟机的IP地址 ifconfig //终端命令,查询ip地址 sudo apt install net-tools 安装完成后再次执行 ifconfig: 2.安装SSH(加密远程登录协议) (1).安装OpenSSH服务器软件包: sudo apt-get install openssh-ser…

软件架构设计属性之四:性能属性浅析

文章目录 引言一、性能属性的内涵与重要性1.1 性能属性的内涵1.2 性能属性的重要性1.3 性能属性的实践应用 二、性能属性的关键影响因素2.1 系统结构2.2 数据处理2.3 并发处理2.4 硬件和资源2.5 软件和框架2.6 监控和优化 三、性能属性的优化策略与实践3.1 优先级队列与资源调度…

AI+算力:科技新时代的创新引擎

随着人工智能(AI)技术的飞速发展,“AI算力”的结合应用已成为科技行业的热点话题,甚至诞生出“AI算力最强龙头“的网络热门等式。这个组合不仅可以提高计算效率,还可以为各行各业带来更强大的数据处理和分析能力&#…

四川汇聚荣聚荣科技有限公司在市场评价好吗?

随着科技行业的迅猛发展,越来越多的科技公司如雨后春笋般涌现,其中不乏一些优秀的企业。四川汇聚荣聚荣科技有限公司便是其中的一员。那么,这家公司在市场上的评价如何呢?接下来,我们将从四个方面进行详细的阐述。 一、公司概况四…

代码随想录算法训练营day34 | 455.分发饼干、376. 摆动序列、53. 最大子序和

理论基础 贪心的本质是选择每一阶段的局部最优,从而达到全局最优。 刷题或者面试的时候,手动模拟一下感觉可以局部最优推出整体最优,而且想不到反例,那么就试一试贪心。 455.分发饼干 result和j变化一致,可以去除一…