解决vue路由发生了跳转但是界面没有任何反应问题

export default new Router({
  routes: [
   {
         path: '/recommend',
         name:'Recommend',
         component: Recommend,
         children:[
           {
             path:':id',
             component: RecommendDetail
           }
         ]
       }
 
  ]
})

 <li @click="selectItem(item)" class="item" v-for="item in recommendList" :key="item.id">

methods：{
    selectItem(item){
      this.$router.push({
        path:`/recommend/${item.id}`
      })
    }
}

.test{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F2F3F4;
  }

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

<router-link :to="{
       path:'/home/message/detail',
       query:{
                id:m.id,
                title:m.title
        }
 ">

goSearch(){
      //搜索按钮的回调函数：需要向search路由进行跳转
      this.$router.push("/search")
}

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

//先把VueRouter原型对象的push保存一份
let originPush=VueRouter.prototype.push
let originReplace=VueRouter.prototype.replace
 
//重写push和replace
//参数：replace:告诉原来的push方法往哪里跳（传递哪些参数） resolve:成功的回调 reject:失败的回调
VueRouter.prototype.push=function(location,resolve,reject){
    if(resolve && reject){
        //call和apply的区别：
        //相同点：都可以调用函数一次，都可以篡改函数的上下文一次
        //不同点：call传递参数用逗号隔开，apply方法执行，传递数组
        originPush.call(this,location,resolve,reject);
    }else{
        originPush.call(this,location,()=>{},()=>{})
    }
}
VueRouter.prototype.replace=function(location,resolve,reject){
    if(resolve && reject){
        //call和apply的区别：
        //相同点：都可以调用函数一次，都可以篡改函数的上下文一次
        //不同点：call传递参数用逗号隔开，apply方法执行，传递数组
        originReplace.call(this,location,resolve,reject);
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}