[JavaScript知识库]vue-router 面试问题整理

路由跳转有几种方式：
声明式导航：router-link（务必要有to属性），可以实现路由的跳转
编程式导航：利用的是组件实例的$router.push|replace 方法，可以实现路由的跳转（可以书写一些自己的业务）

路由传参：

parmas 传参：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query 参数：不属于路径当中的一部分，类似于ajax 中的queryString ? /home?k=v&kv=, 不需要占位

路由参数：
第一种：字符串形式

this.$router.push('/search/'+this.keyword+"?k="+this.keyword.toUpperCase());

this.$route.params.keyword

this.$route.query.k

第二种：模板字符串

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

第三种：对象形式 ?(事先给路由组件添加name参数)

this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()} })

路由组件是可以接收 props 形式的参数

编程式导航跳转报警告错误的解决方法：

1:编程式路由跳转到当前路由(参数不变)，多次执行会抛出NavigationDuplicated的警告错误?--路由跳转有两种形式:声明式导航、编程式导航
--声明式导航没有这类问题的，因为vue-router底层已经处理好了1.1为什么编程式导航进行路由跳转的时候，就有这种警告错误那?"vue-router" : "个3.5.3":最新的vue-router引入promise
1.2通过给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。|
治标不治本的方法：
编程式导航返回的结果是promise ，给它添加成功的回调函数，和失败的回调函数处理异常

this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()} ()=>{},()=>{}})

治标治本的方法：

let originPush=VurRouter.prototype.push;
VueRouter.prototype.push=function(location,resolve,reject){
?? ?if(resolve && reject){
?? ??? ?originPush.call(this.location,resolve,reject);
?? ?}else{
?? ??? ?originPush.call(this,location,()=>{},()=>{});
?? ?}
}

let originReplace=VueRouter.prototype.replace;

VueRouter.protorype.replace=function(location,resolve,reject){
?? ?if(resolve && reject){
?? ??? ?originReplace.call(this,location,resolve,reject);
?? ?}else{
?? ??? ?originReplace.call(this,location,()=>()=>{});
?? ?}
}