当前位置:网站首页>路由中的meta、params传参的一些问题(可传不可传,为空,搭配,点击传递多次参数报错)
路由中的meta、params传参的一些问题(可传不可传,为空,搭配,点击传递多次参数报错)
2022-08-04 21:00:00 【半夜删你代码·】
当一个路由对象不需要显示某个组件时,可以通过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)
}
}
边栏推荐
猜你喜欢
动态数组底层是如何实现的
Oreo域名授权验证系统v1.0.6公益开源版本网站源码
无代码平台字段设置:基础设置入门教程
Interviewer: How is the expired key in Redis deleted?
【TypeScript】深入学习TypeScript枚举
DICOM医学影像协议
How to make good use of builder mode
mdk5.14无法烧录
Oreo domain name authorization verification system v1.0.6 public open source version website source code
格密码入门
随机推荐
run command for node
QT(41)-多线程-QTThread-同步QSemaphore-互斥QMutex
uwp ScrollViewer content out of panel when set the long width
Tear down the underlying mechanism of the five JOINs of SparkSQL
文章复现:超分辨率网络-VDSR
js的new Function()常用方法
【数据挖掘】搜狐公司数据挖掘工程师笔试题
【AGC】构建服务1-云函数示例
jekyll adds a flowchart to the blog
Getting Started with Lattice Passwords
如何用好建造者模式
密码学系列之:PEM和PKCS7,PKCS8,PKCS12
【一起学Rust | 进阶篇 | Service Manager库】Rust专用跨平台服务管理库
【Programming Ideas】
该如何训练好深度学习模型?
Web3时代的战争
Big capital has begun to flee the crypto space?
jekyll 在博客添加流程图
【随记】新一天搬砖 --20220727
dotnet 使用 lz4net 压缩 Stream 或文件