解決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">
定義點擊函數
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 ，又能單獨顯示一個新的頁面了。
這個根據樣式來的也好理解。
好奇難道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參數 to的字符串寫法
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>2.跳轉路由并攜帶query參數 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(){
? ? ? //搜索按鈕的回調函數：需要向search路由進行跳轉
? ? ? this.$router.push("/search")
}但是！有一個問題：為什么編程式導航多次執(zhí)行會有NavigationDuplicated的警告
因為最新的vue-router引入promise函數，但promise需要一個T/F結果
解決方法如下：通過給push方法傳入相應的成功和失敗的回調函數，可以捕獲到當前錯誤，這樣可以解決這個問題。
比如：
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
//參數：replace:告訴原來的push方法往哪里跳（傳遞哪些參數） resolve:成功的回調 reject:失敗的回調
VueRouter.prototype.push=function(location,resolve,reject){
? ? if(resolve && reject){
? ? ? ? //call和apply的區(qū)別：
? ? ? ? //相同點：都可以調用函數一次，都可以篡改函數的上下文一次
? ? ? ? //不同點：call傳遞參數用逗號隔開，apply方法執(zhí)行，傳遞數組
? ? ? ? originPush.call(this,location,resolve,reject);
? ? }else{
? ? ? ? originPush.call(this,location,()=>{},()=>{})
? ? }
}
VueRouter.prototype.replace=function(location,resolve,reject){
? ? if(resolve && reject){
? ? ? ? //call和apply的區(qū)別：
? ? ? ? //相同點：都可以調用函數一次，都可以篡改函數的上下文一次
? ? ? ? //不同點：call傳遞參數用逗號隔開，apply方法執(zhí)行，傳遞數組
? ? ? ? originReplace.call(this,location,resolve,reject);
? ? }else{
? ? ? ? originReplace.call(this,location,()=>{},()=>{})
? ? }
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix
這篇文章主要介紹了解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix`?option的報錯問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
這篇文章主要介紹了vue使用echarts畫組織結構圖的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue.js打包項目后頁面出現(xiàn)空白的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
使用websocket和Vue2中的props實時更新數據方式
這篇文章主要介紹了使用websocket和Vue2中的props實時更新數據方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了vue調用高德地圖實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
vue-electron使用serialport時問題解決方案
這篇文章主要介紹了vue-electron使用serialport時問題解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
在WebStorm中怎么打開一個已有的項目,這個不用多說,那么如何運行一個vue項目呢?下面這篇文章主要給大家介紹了關于使用WebStorm運行vue項目的相關資料,需要的朋友可以參考下2023-02-02
過濾器的功能是對要顯示的數據進行格式化后再顯示,其并沒有改變原本的數據,只是產生新的對應的數據,下面這篇文章主要給大家介紹了關于Vue中過濾器定義以及使用方法的相關資料,需要的朋友可以參考下2022-12-12
當我們未設置keepAlive的最大緩存數時,當緩存組件太多,會導致內存溢出,本文給大家介紹了vue3手動刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-03-03