首页 > 其他分享 >跳转传参及参数获取

跳转传参及参数获取

时间:2024-11-06 11:15:06浏览次数:5  
标签:传参 useRoute route 传参及 参数 跳转 path 路由

跳转传参

我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参
  • 动态路由传参

查询参数传参

如何传参?

注:

① 参数的值不用加""

② key与=与参数名之间不要加空格!!

   <router-link to="/path?参数名=值"></router-link>
    //有多个参数使用&链接

如何获得参数

1. Vue2

$route.query.参数名

在created()之中获取:

this.$route.query.参数名

2. Vue3
使用VueRouter提供的useRoute方法来获得route实例

// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()

参数获取:route.query.参数名

动态路由传参

传参方式

  • 配置动态路由
    动态路由后面的参数可以随便起名,但要有语义
    path: '/path/:参数名'
      const router = new VueRouter({
        routes: [
          ...,
          { 
            path: '/search/:words', 
            component: Search 
          }
        ]
      })
  • 配置导航链接
    to="/path/参数值"

获得参数

1. Vue2
$route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

在created()之中获取:

this.$route.params.参数名

2. Vue3
使用VueRouter提供的useRoute方法来获得route实例

// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()

参数获取:route.params.参数名

总结

查询参数传参 VS 动态路由传参

  1. 查询参数传参 (比较适合传多个参数)
    • 跳转:to=“/path?参数名=值&参数名2=值”
    • 获取:$route.query.参数名 / route.query.参数名
  2. 动态路由传参 (优雅简洁,传单个参数比较方便)
    • 配置动态路由:path: “/path/:参数名”
    • 跳转:to=“/path/参数值”
    • 获取:$route.params.参数名 / route.params.参数名

注意:动态路由也可以传多个参数,但一般只传一个

声明式导航跳转时, 有几种方式传值给路由页面?

  • 查询参数传参(多个参数)
  • 动态路由传参(一个参数,优雅简洁)

使用useRoute()创建route实例相当于$route

标签:传参,useRoute,route,传参及,参数,跳转,path,路由
From: https://blog.csdn.net/m0_73883323/article/details/143562026

相关文章

  • 博客园记录:汽车参数爬虫
    可以输入汽车品牌名,从而爬取对应汽车参数点击查看代码fromrandomimportrandomfrombs4importBeautifulSoupfromfake_useragentimportUserAgentfromdatetimeimporttimefromcoloramaimportForefromopenpyxlimportload_workbookfromopenpyxl.stylesimpor......
  • ATC:多快好省,无参数token reduction方法 | ECCV'24
    来源:晓飞的算法工程笔记公众号,转载请注明出处论文:AgglomerativeTokenClustering论文地址:https://arxiv.org/abs/2409.11923论文代码:https://github.com/JoakimHaurum/ATC创新点提出了层次token聚类(AgglomerativeTokenClustering,ATC),这是一种新型的无参数层次合......
  • Nginx 常用参数详解和举例说明实操指南
    Nginx常用参数详解和举例说明实操指南一、引言1.参数详解的目的和意义Nginx的配置参数是优化性能和提升安全性的关键。通过合理配置这些参数,可以显著提高Nginx的性能,减少资源消耗,增强系统的稳定性和安全性。2.适用人群和场景运维工程师:负责Nginx的日常管理和维护,需......
  • Hunyuan-Large:腾讯发布业界参数规模最大的开源 MoE 模型,支持超长文本输入,超越主流开源
    ❤️如果你也关注大模型与AI的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的AI应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦!......
  • 2.路径操作装饰器方法参数简介
    1.get请求2.post请求3.put请求4.delete请求5.@app.pos()中参数的功能应用 ......
  • 规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及
    一、规范命名的重要性易懂、通用、规范、标准、专业性、是经验积累的体现1.1、常见命名方法序号命名方法解释1全小写2全大写3驼峰:小驼峰命名法4驼峰:大驼峰命名法5烤串命名法/脊柱命名法6下划线分隔法二、项目名采用小写字母和中划线(-)连接的方式命名,如my-project序号规......
  • HarmonyOS 开发实践——跨语言的复杂参数类型传递
    ......
  • 如何定义ggplot2 的scale_fill_manual() 中参数 values 的命名向量?
    需求背景对R语言中,ggplot2的scale_fill_manual()函数的values参数理解不到位,它这里需要的是一个命名向量,无法在c()函数内部直接创建一个向量。举例说明,以不同分类数据的条形图来作为图例。比如我有14个不同物种,绘制其不同颜色的条形图,注意颜色不能随便定义,需要指定每个......
  • 【typescript】什么是类型参数全局?如何使用它们?
    在TypeScript中,“类型参数全局”并不是一个标准术语,这里是指如何在全局范围内定义和使用类型参数,或者是如何处理全局类型的定义。不过,如果从全局类型的角度来看,我们可以讨论一下如何在TypeScript中定义和使用全局类型,以及如何通过类型参数在全局范围内传递类型信息。全局类......
  • 【typescript】什么是类型参数工具类型?如何使用它们?
    什么是类型参数工具类型?类型参数工具类型(UtilityTypes)是TypeScript提供的内置类型,用于在现有类型的基础上进行转换或修改。这些工具类型可以帮助开发者简化常见的类型操作,如去除属性的可选项、添加只读属性、提取对象的键等。TypeScript的工具类型非常强大,能够显著提高代......