路由跳转到当前页面报错解决和实现

前言

vue中点击跳转当前页在控制台中汇报warning,不影响使用但会影响心情,如何解决和如何实现跳转当前页的需求,下面记录我在实际开发中采用的解决方法.

跳转当前页面不报错

在router文件夹下的index.js文件中配置如下代码:

// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象上的push方法
VueRouter.prototype.push = function push (location) {
return originalPush.call(this,location).catch(err=>err)
}

跳转当前页面需求实现(后台管理系统)

方法一

在appMain.vue文件中修改如下:

<template>
...
<router-view v-if="routerAlive" :key="$router.fullPath"></router-view>
...
</template>
<script>
...
data(){
return {
routerAlive:true
  }
    },
provide(){
routerRefresh:this.routerRefresh
    },
methods:{
...
routerRefresh(){
this.routerAlive = false
this.$nextTick(()=>{
this.routerAlive = true
})
  }
    }
...
</script>

在子组件中修改如下:

<script>
...
inject:['routerRefresh']
...
methods:{
...
skip(){
const toLinkRes = this.$router.push({
name:'test',
query:{
id:001,
name:'曹贼'
       }
          })
toLinkRes.then(()=>{
this.routerRefresh()
})
     }
  }
</script>

方法二

该后台系统有页签需求,在store文件夹下的index.js中修改如下:

mutations:{
...
removeTab(state,payload){
let index = state.tabs.findIndex(item => item.name = payload)
if(index === -1 ) return
state.tabs.splice(index,1)
if(state.tabs.length<1){
state.tabs = [
{
name:'index',
query:{},
params:{},
meta:{
title:'首页'
}
}
]
router.push(state.tabs[0])
}else if (state.currentTab === payload){
let target = state.tabs[index]
if(!target){
target = state.tabs[index-1]
}
state.currentTab = target.name
router.push(target)
}
 }
}

在子组件中修改如下:

<script> 
... 
inject:['routerRefresh'] 
... 
methods:{ 
... 
skip(){ 
setTimeout(()=>{
this.$router.push({ 
name:'test', 
query:{ 
id:001, 
name:'曹贼' 
} 
}) 
})
this.$store.commit('removeTab','test')
}
} 
</script>

最后

希望整理的信息对您有所帮助,喜欢的话请帮忙点赞

如果有什么建议,欢迎在评论区留言

不足之处还请批评指教,谢谢!