腳本之家服務器常用軟件

快捷導航

解決vue路由發(fā)生了跳轉但是界面沒有任何反應問題

更新時間：2023年04月24日 09:47:47 作者：321茄子

這篇文章主要介紹了解決vue路由發(fā)生了跳轉但是界面沒有任何反應問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue路由發(fā)生了跳轉但是界面沒有任何反應

vue 路由發(fā)生了跳轉但是界面沒有任何反應，可能會父組件中<router-view></router-view>位置放的不合適。

今天做案列遇到一個問題，足足花了一個下午才解決了問題，但是終究的原因還是有些不理解

項目中我要從一級歌單列表頁面跳轉到歌單詳情頁面，用到的是子路由。

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

給父組件 recommend 列表頁面的每個<li >綁定點擊事件

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

定義點擊函數(shù)

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

在父組件 recommend 中合適的位置設置 <router-view></router-view> 這一步一定要設置。

以上都沒問題，誒接下來郁悶的事情就發(fā)生了。

我以為點擊 li 標簽之后頁面會跳到路由指定了組件，recommend_detial。實際上路由確實是發(fā)生了跳轉。但是界面沒有反應。這就有點奇怪了。

思考一下，界面即使不單獨顯示路由對應的組件，那也應該在父元素指定的 <router-view></router-view> 區(qū)域顯示呀，不是么？

然而沒有呀

但是 dom 里面又存在但是顯示不出來，啥意思？

然后通過給該dom 設置css ，又能單獨顯示一個新的頁面了。

這個根據(jù)樣式來的也好理解。

好奇難道vue中新界面是通過css來輔助設計的？

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

以上目的總算達成了。

但是還是有些想不通呀為什么在父組件給定的<router-view></router-view>的區(qū)域沒有顯示出來。

嘗試將<router-view></router-view>在父組件中換一個位置。

并將剛才設置的css去掉。

當當當當有了

原來是設置的加載動畫組件的干擾。

vue路由跳轉界面的兩種方式

路由跳轉的幾種方式

聲明式導航

一開始寫樣式我們寫的是a標簽，在響應式設計的時候就改成router-link，實質也是一種a標簽。聲明式導航務必要有to屬性，比如<router-link to="/login" >登錄</router-link>

兩個例子：

1.跳轉路由并攜帶query參數(shù) to的字符串寫法

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

2.跳轉路由并攜帶query參數(shù) to的對象寫法

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

編程式導航

利用組件實例的$router.push/replace方法可以實現(xiàn)路由跳轉

首先在button添加一個click方法比如我這里的例子是 @click="goSearch"

然后在script中暴露方法method

goSearch(){
? ? ? //搜索按鈕的回調函數(shù)：需要向search路由進行跳轉
? ? ? this.$router.push("/search")
}

但是！有一個問題：為什么編程式導航多次執(zhí)行會有NavigationDuplicated的警告

因為最新的vue-router引入promise函數(shù)，但promise需要一個T/F結果

解決方法如下：通過給push方法傳入相應的成功和失敗的回調函數(shù)，可以捕獲到當前錯誤，這樣可以解決這個問題。

比如：

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

這種方法可以解決這個問題，但是這治標不治本，想要之后不再出現(xiàn)這個問題，最好的解決方法就是要么用聲明式導航不要用編程式導航，要么就重寫push和replace

重寫push和replace

在router配置中加入下面這個代碼（通用的，直接加進去就好）：

//先把VueRouter原型對象的push保存一份
let originPush=VueRouter.prototype.push
let originReplace=VueRouter.prototype.replace
?
//重寫push和replace
//參數(shù)：replace:告訴原來的push方法往哪里跳（傳遞哪些參數(shù)） resolve:成功的回調 reject:失敗的回調
VueRouter.prototype.push=function(location,resolve,reject){
? ? if(resolve && reject){
? ? ? ? //call和apply的區(qū)別：
? ? ? ? //相同點：都可以調用函數(shù)一次，都可以篡改函數(shù)的上下文一次
? ? ? ? //不同點：call傳遞參數(shù)用逗號隔開，apply方法執(zhí)行，傳遞數(shù)組
? ? ? ? originPush.call(this,location,resolve,reject);
? ? }else{
? ? ? ? originPush.call(this,location,()=>{},()=>{})
? ? }
}
VueRouter.prototype.replace=function(location,resolve,reject){
? ? if(resolve && reject){
? ? ? ? //call和apply的區(qū)別：
? ? ? ? //相同點：都可以調用函數(shù)一次，都可以篡改函數(shù)的上下文一次
? ? ? ? //不同點：call傳遞參數(shù)用逗號隔開，apply方法執(zhí)行，傳遞數(shù)組
? ? ? ? originReplace.call(this,location,resolve,reject);
? ? }else{
? ? ? ? originReplace.call(this,location,()=>{},()=>{})
? ? }
}