首页 > 其他分享 >$router.push()中通过path跳转和通过name跳转有什么区别

$router.push()中通过path跳转和通过name跳转有什么区别

时间:2023-11-21 09:57:07浏览次数:28  
标签:传参 name 路径 跳转 push path

今天在路由跳转传参时发现params传参接收到的总是为空,才发现通过path和name传参是有区别的

  • path传参要完整的路径,不能带参数。name传参可以带params。
  • params的传参页面刷新会丢失,query的传参不会丢失
  1. 使用path进行跳转:

    当你使用path进行跳转时,你需要提供完整的路径字符串,包括路径和查询参数(如果有的话)。例如:

    
      this.$router.push({ path: '/user/123' })
    
    

    使用path进行跳转的优点是路径是静态的,你可以直接指定要跳转到的路径。但是,如果你需要传递参数或查询参数,你需要手动构建完整的路径字符串。

  2. 使用name进行跳转:

    当你使用name进行跳转时,你只需要提供路由的名称,而不需要手动构建路径字符串。Vue Router会自动解析并找到对应的路径。例如:

      this.$router.push({ name: 'User' });
    

    使用name进行跳转的优点是你可以通过简单的名称来指定要跳转到的路由,而不需要手动构建路径字符串。同时,Vue Router会自动解析并找到对应的路径。此外,当使用命名路由时,你还可以传递参数,例如:

      this.$router.push({ name: 'User', params: { userId: 123 } });
    

    这样,Vue Router会自动将userId参数填充到路径中。

    总而言之,使用path和name进行跳转的主要区别在于:使用path时,你需要手动构建完整的路径字符串;而使用name时,你可以通过简单的名称来指定路由,并可以传递参数。

标签:传参,name,路径,跳转,push,path
From: https://www.cnblogs.com/wang--chao/p/17845525.html

相关文章

  • [emerg] could not build server_names_hash, you should increase server_names_hash
    解决nginx报错nginx:[emerg]couldnotbuildserver_names_hash,youshouldincreaseserver_names_hash_bucket_size:32nginx:configurationfilexxxx/conf/nginx.conftestfailed报错原因该报错产生的原因主要是因为Nginx中的server配置中server_name的定义值过长......
  • 与CNAME有关的DNS解决实例
    故障现象:1,通过DNS管理平台添加或者更新的DNS记录,使用rndcreload显示执行成功,但不能生效。2,BIND进程重启后,无法提供服务。3,日志报错:15-Feb-201712:04:38.604general:error:dns_master_load:sdo.com/zone_beijing_CMCC:198:sdo.com:CNAMEandotherdata15-Feb-201712......
  • 09.路由跳转
    路由跳转应用场景场景:假设在新增信息页面,完成新增操作之后需要跳转到展示页面。展示页面是个动态页面,它的逻辑是,如果有参数,则展示相关参数的结果,如果没有参数,则展示所有的信息。解决:使用 url_for() 生成url,再使用 redirect() 方法完成路径的重定向。实现当完成添......
  • 跳转语句
    跳转语句的概念跳转语句用于程序的转移控制,改变程序的执行流程,转移到指定之处;与程序转移有关的跳转包括break语句、continue语句以及goto语句;break和continue语句主要与循环有关;goto语句在C语言中有,他是无条件跳转,所以可以完全替代break和continue语句,一般要慎用。break语句的使用......
  • web第三章网页之间的跳转
    本章首节是超链接链接由以下三部分组成:<a>文本或图片</a>标签为链接的源点“内属性href=···,标签<a>最基本属性(内加各种链接)路径地址(url),要链接的目标,简单来说就是说可以复制一个链接超链接的路径1.绝对路径:是指一个完整的资源地址可以是外部链接基本格式:通讯协议://服务......
  • class lombok.javac.apt.LombokProcessor (in unnamed module @0x4587f0f9)
    classlombok.javac.apt.LombokProcessor(inunnamedmodule@0x4587f0f9)cannotaccessclasscom.sun.tools.javac.processing.JavacProcessingEnvironment(inmodulejdk.compiler)becausemodulejdk.compilerdoesnotexportcom.sun.tools.javac.processingtounn......
  • 打工笔记----------------------------iframe重定向让父级页面跳转
    "top.location.href"是最外层的页面跳转$.ajax({url:URL+"SystemPrivileges/UserChangePW",data:{userName:userName,passWord:passWord,oldpwd:passWordold,token:token},type:"post",dataType:"json&q......
  • RT-Thread Studio中添加软件包报错ImportError: No module named psutil
    经查,我这里是与RT-ThreadStudio一起的python2.7中没有psutil模块导致的,因此需要在python2.7中安装psutil模块。我这里已经安装了python3.8,于是先将环境变量替代为RT-ThreadStudio一起的python2.7(方便下面的命令行执行):然后安装psutil模块:然后就好了: ......
  • 如何解决AttributeError: 'DictVectorizer' object has no attribute 'get_feature_na
    这个错误通常是因为 DictVectorizer 对象没有 get_feature_names 属性。这可能是因为你使用的 sklearn 版本过低,或者是因为你没有正确地导入 DictVectorizer 类。要解决这个问题,你可以尝试升级 sklearn 版本,或者使用以下代码导入 DictVectorizer 类:fromsklearn.f......
  • 无涯教程-Dart - Optional named parameter函数
    与位置参数不同,必须在传递值时指定参数名称,花括号{}可用于指定可选的命名参数。语法 - 声明函数voidfunction_name(a,{optional_param1,optional_param2}){}语法 - 调用函数function_name(optional_param:value,…);示例voidmain(){test_param(123);......