路由中的meta、params传参的一些问题(可传不可传,为空,搭配,点击传递多次参数报错)

2023-11-20

当一个路由对象不需要显示某个组件时,可以通过meta设置

登录注册不需要Footer,通过路由meta配置解决
    从route当中可以获取到path判断可以解决但是麻烦
    通过路由配置的时候路由对象当中配置meta设置来做

<Footer v-show="!$route.meta.isHidden"></Footer>

  {

    path:'/login',

    component:Login,

    // 元设置对象,里面可以配置自己想配的任何数据

    meta:{

      isHidden:true

    }

  },

 问题1:

指定params参数时可不可以用path和params配置的组合?(对象写法)
        不可以用path和params配置的组合, 
        只能用name和params配置的组合
        query配置可以与path或name进行组合使用

问题2:

如何指定params参数可传可不传?    
        path: '/search/:keyword?'

问题3:

如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题
前提是路由params参数要可传可不传
        解决1: 不指定params
        解决2: 指定params参数值为undefined

问题4:

路由组件能不能传递props数据?
        可以: 可以将query或且params参数映射/转换成props传递给路由组件对象
        实现: props: (route)=>({keyword1:route.params.keyword, keyword2: route.query.keyword })
 

问题5:

vue_router3.1.0版本以上引入了promise的语法:
        如果我们传递参数,没有去修改参数,同时点击多次,会抛出这样的错误
        Uncaught (in promise) NavigationDuplicated,原因是内部promise是失败的,而我们又没有进行处理造成的
        解决1:降版本,不好
        解决2:处理失败的promise  在push调用之后加.catch(() => {})  不好,每次都要加,烦
        解决3:修改源码,一劳永逸

 push方法是有三个参数:  

        1、匹配的路由(可以是路由路径字符串,也可以是路由对象)

        2、成功的回调

        3、失败的回调

push方法想要不报错

      vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated:

      Avoided redundant navigation to current location: "/search/aa?keyword1=AA".

      传递参数的时候,成功和失败的回调至少要传递一个

      根据源码分析,传递至少一个处理函数,那么就不会引发promise的介入,如果都不传,那么

      就会引入promise介入,而我们又没有处理失败的回调函数,就会抛出异常,报错

       if (!onComplete && !onAbort && typeof Promise !== 'undefined') {

          return new Promise(function (resolve, reject) {

            this$1.history.push(location, resolve, reject);

          });

        } else {

          this.history.push(location, onComplete, onAbort);

        }

在路由器里配置

// this.$router.push调用的方法就是下面这个方法

// 1、保存之前的push方法,防止后期修改丢失
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace
// 2、修改原型身上的push方法,让后期再去调用的时候调用的是我修改后的push方法
VueRouter.prototype.push = function(location,resolved,rejected){
  if(resolved === undefined && rejected === undefined){
    return originPush.call(this,location).catch(() => {})
  }else{
    return originPush.call(this,location,resolved,rejected)
  }
}


VueRouter.prototype.replace = function(location,resolved,rejected){
  if(resolved === undefined && rejected === undefined){
    return originReplace.call(this,location).catch(() => {})
  }else{
    return originReplace.call(this,location,resolved,rejected)
  }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

路由中的meta、params传参的一些问题(可传不可传,为空,搭配,点击传递多次参数报错) 的相关文章

  • 如何使用 java/vb 脚本调用自定义 ActiveX dll 中的方法

    我使用 VB6 创建了一个 ActiveX dll 并使用打包和部署向导将其打包 生成了一个 cab 文件和一个演示 HTML 页面 此 ActiveX dll 包含一个 simgle 方法 该方法返回字符串且不接受任何参数 我遇到的麻烦是
  • 如何检索 jquery $.ajax 对象的responseJSON属性[重复]

    这个问题在这里已经有答案了 我有这个 JavaScript ajax ajax type GET url DBConnect php data dataType json success function data error functi
  • 为具有可变内容的内联块元素提供相同的高度?

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使
  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f
  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag
  • jquery/javascript 处理后移至命名锚点

    在进行一些 jquery 处理后 如何将焦点移动到同一页面上的不同部分 名为锚点 函数 ABC 进行一些处理 然后 我需要将用户移动到同一页面上的某个部分 页面下方 您可以使用下面的代码将屏幕滚动到 div 只需更改选择器以匹配您要滚动到的
  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5
  • 在 AngularJS 中覆盖运行时的依赖关系

    我有一个服务叫 doggedHttp 它公开了与 http 现在我想创建一个 doggedResource服务是有角度的 resource服务之上 doggedHttp代替 http 换句话说我想注入 doggedHttp as the h
  • 按自定义字母顺序对数组进行排序

    如何对这样的数组进行排序 apple very auto tom tim violet 要按 v a t x b 等排序 不按字母顺序 violet very auto tom tim 在脚本中 我会做这样的事情 myArray sort
  • 在 NPM 上捆绑并发布客户端 Web 代码

    我制作了一个 JavaScript 文件 假设它的内容是这样的 let myCoolAlert str gt alert str in a different js file SO doesn t allow you to cross fi
  • 使用 test() 通过正则表达式进行信用卡验证

    我正在尝试完成一些作业 看来这本书可能做错了 我有一个简单的 html 页面 允许用户在我们的例子中选择信用卡 美国运通卡 然后 用户输入一个数字并根据正则表达式评估该数字 我的问题最终是当 test 计算它返回的数字时是布尔值还是字符串
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • 如何在流程图中间隔刻度线?

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 用于客户端存储和服务器端同步的javascript库[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个 javascript 库 它可以让我将数据存储在客户端数据库中 并在后台自动将数据库同
  • 如何检查摘要周期是否稳定(又名“Angular 完成编译了吗?”)

    tl dr 最初的问题是 如何在每个摘要周期触发回调 但潜在的问题更有趣 因为这回答了两个问题 所以我继续修改了标题 Context 在解决了所有依赖项 nginclude API 调用等之后 我试图控制 Angular 何时完成 HTML
  • 在javascript中定义Date.parse的格式[重复]

    这个问题在这里已经有答案了 我正在使用 Date parse 将字符串转换为 JavaScript 中的日期 但是 如果字符串看起来像 10 11 2016 它会被解释为 2016 年 10 月 11 日 我需要将其解释为 2016 年 1
  • JavaScript 右移负数

    这是片段 var i 101 console log 101 i toString 2 console log 101 gt gt 1 i gt gt 1 toString 2 var l 101 console log 101 l toS
  • 如何在odoo中重写js函数

    我想加载 shop checkout url 函数是 odoo define change info order website sale change info order function require use strict oe w

随机推荐