解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒(méi)有任何反應(yīng)問(wèn)題
vue路由發(fā)生了跳轉(zhuǎn)但是界面沒(méi)有任何反應(yīng)
vue 路由發(fā)生了跳轉(zhuǎn)但是界面沒(méi)有任何反應(yīng),可能會(huì)父組件中<router-view></router-view>位置放的不合適。
今天做案列遇到一個(gè)問(wèn)題,足足花了一個(gè)下午才解決了問(wèn)題,但是終究的原因還是有些不理解
項(xiàng)目中我要從一級(jí)歌單列表頁(yè)面跳轉(zhuǎn)到歌單詳情頁(yè)面,用到的是子路由。
export default new Router({ routes: [ { path: '/recommend', name:'Recommend', component: Recommend, children:[ { path:':id', component: RecommendDetail } ] } ] })
給父組件 recommend 列表頁(yè)面的每個(gè)<li >綁定點(diǎn)擊事件
<li @click="selectItem(item)" class="item" v-for="item in recommendList" :key="item.id">
定義點(diǎn)擊函數(shù)
methods:{ selectItem(item){ this.$router.push({ path:`/recommend/${item.id}` }) } }
在 父組件 recommend 中合適的位置設(shè)置 <router-view></router-view> 這一步一定要設(shè)置。
以上都沒(méi)問(wèn)題,誒 接下來(lái)郁悶的事情就發(fā)生了。
我以為點(diǎn)擊 li 標(biāo)簽之后頁(yè)面會(huì)跳到路由指定了 組件,recommend_detial。 實(shí)際上路由確實(shí)是發(fā)生了跳轉(zhuǎn)。但是界面沒(méi)有反應(yīng)。這就有點(diǎn)奇怪了。
思考一下,界面即使不單獨(dú)顯示路由對(duì)應(yīng)的組件,那也應(yīng)該在 父元素指定的 <router-view></router-view> 區(qū)域顯示呀,不是么?
然而沒(méi)有呀
但是 dom 里面又存在 但是顯示不出來(lái),啥意思?
然后通過(guò)給 該dom 設(shè)置css ,又能單獨(dú)顯示一個(gè)新的頁(yè)面了。
這個(gè)根據(jù)樣式來(lái)的也好理解。
好奇難道vue中新界面是通過(guò)css來(lái)輔助設(shè)計(jì)的?
.test{ position: fixed; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background-color: #F2F3F4; }
以上目的總算達(dá)成了。
但是還是有些想不通呀 為什么在父組件給定的<router-view></router-view>的區(qū)域沒(méi)有顯示出來(lái)。
嘗試將<router-view></router-view>在父組件中換一個(gè)位置。
并將剛才設(shè)置的css去掉。
當(dāng)當(dāng)當(dāng)當(dāng) 有了
原來(lái)是設(shè)置的 加載動(dòng)畫(huà)組件的干擾。
vue路由跳轉(zhuǎn)界面的兩種方式
路由跳轉(zhuǎn)的幾種方式
聲明式導(dǎo)航
一開(kāi)始寫(xiě)樣式我們寫(xiě)的是a標(biāo)簽,在響應(yīng)式設(shè)計(jì)的時(shí)候就改成router-link,實(shí)質(zhì)也是一種a標(biāo)簽。聲明式導(dǎo)航務(wù)必要有to屬性,比如<router-link to="/login" >登錄</router-link>
兩個(gè)例子:
1.跳轉(zhuǎn)路由并攜帶query參數(shù) to的字符串寫(xiě)法
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
2.跳轉(zhuǎn)路由并攜帶query參數(shù) to的對(duì)象寫(xiě)法
<router-link :to="{ ? ? ? ?path:'/home/message/detail', ? ? ? ?query:{ ? ? ? ? ? ? ? ? id:m.id, ? ? ? ? ? ? ? ? title:m.title ? ? ? ? } ?">
編程式導(dǎo)航
利用組件實(shí)例的$router.push/replace方法可以實(shí)現(xiàn)路由跳轉(zhuǎn)
首先在button添加一個(gè)click方法 比如我這里的例子是 @click="goSearch"
然后在script中暴露方法method
goSearch(){ ? ? ? //搜索按鈕的回調(diào)函數(shù):需要向search路由進(jìn)行跳轉(zhuǎn) ? ? ? this.$router.push("/search") }
但是!有一個(gè)問(wèn)題:為什么編程式導(dǎo)航多次執(zhí)行會(huì)有NavigationDuplicated的警告
因?yàn)樽钚碌膙ue-router引入promise函數(shù),但promise需要一個(gè)T/F結(jié)果
解決方法如下:通過(guò)給push方法傳入相應(yīng)的成功和失敗的回調(diào)函數(shù),可以捕獲到當(dāng)前錯(cuò)誤,這樣可以解決這個(gè)問(wèn)題。
比如:
this.$router.push({name:"search",params:{keyword:this.keyword || undefined},query:{k:this.keyword.toUpperCase()}},()=>{},()=>{})
這種方法可以解決這個(gè)問(wèn)題,但是這治標(biāo)不治本,想要之后不再出現(xiàn)這個(gè)問(wèn)題,最好的解決方法就是要么用聲明式導(dǎo)航不要用編程式導(dǎo)航 ,要么就重寫(xiě)push和replace
重寫(xiě)push和replace
在router配置中加入下面這個(gè)代碼(通用的,直接加進(jìn)去就好):
//先把VueRouter原型對(duì)象的push保存一份 let originPush=VueRouter.prototype.push let originReplace=VueRouter.prototype.replace ? //重寫(xiě)push和replace //參數(shù):replace:告訴原來(lái)的push方法往哪里跳(傳遞哪些參數(shù)) resolve:成功的回調(diào) reject:失敗的回調(diào) VueRouter.prototype.push=function(location,resolve,reject){ ? ? if(resolve && reject){ ? ? ? ? //call和apply的區(qū)別: ? ? ? ? //相同點(diǎn):都可以調(diào)用函數(shù)一次,都可以篡改函數(shù)的上下文一次 ? ? ? ? //不同點(diǎn):call傳遞參數(shù)用逗號(hào)隔開(kāi),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ū)別: ? ? ? ? //相同點(diǎn):都可以調(diào)用函數(shù)一次,都可以篡改函數(shù)的上下文一次 ? ? ? ? //不同點(diǎn):call傳遞參數(shù)用逗號(hào)隔開(kāi),apply方法執(zhí)行,傳遞數(shù)組 ? ? ? ? originReplace.call(this,location,resolve,reject); ? ? }else{ ? ? ? ? originReplace.call(this,location,()=>{},()=>{}) ? ? } }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁(yè)面上,就會(huì)導(dǎo)致頁(yè)面卡頓,往往采用分頁(yè)和無(wú)限滾動(dòng)的方式來(lái)展示,本文主要介紹了vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開(kāi)
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開(kāi),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問(wèn)題
這篇文章主要介紹了解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級(jí)版(處理并發(fā)異步差時(shí)響應(yīng)),解決思路是通過(guò)定義一個(gè)全局對(duì)象來(lái)存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài),直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài),結(jié)束loading動(dòng)畫(huà),需要的朋友可以參考下2023-11-11