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

当一个路由对象不需要显示某个组件时,可以通过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)
  }
}

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值