Vue路由---传参拓展

73 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情juejin.cn/post/714765…

今天自学了有关路由的小知识点,以及一些小的面试知识点,给大家分享一下,有更好的写法希望大家多提意见!!!

面试题1:对象形式传参时path可以和params一起使用吗?

答:不可以。path可以和query使用。但是params必须和name一起使用。 this.$router.push({name:'search',params:{key:this.keyworlds},query:{k:this.keyworlds.toUpperCase()}})

面试题2:如何指定params参数可传可不传?

答:在做路由配置的时候,给params占位符后面添加"?",在正则表达式里?代表0或者1,就是可传可不传,否则的话 this.$router.push({name:'search',query:{k:this.keyworlds}})

面试题3:params可传可不传,传了空字符串“search”路径也不会出现在url中,怎么解决?

答: 使用undefined解决。代码如下 this.$router.push({name:'search',params:{key:''||undefined},query:{k:this.keyworlds}})

面试题4:路由可以传递props吗?

微信图片_20221013100356.png 传参页面照常如上写法。 答:可以。在做路由配置时,加上props属性为true,这样在组件接收props时,照常注册props:["这的名字就是params的占位名"],但是只能传props参数。

1.png

2.png 第一种方法和第二种方法得到的结果是一样的。

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。 这种异常,对于程序没有任何影响的。 为什么会出现这种现象: 由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象, 第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调 第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病; 代码如下:

1.png