Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(méi)有重新加載的解決方法
更新時(shí)間：2018年09月01日 08:23:38 作者：木馬啊
今天小編就為大家分享一篇Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(méi)有重新加載的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
第二次進(jìn)入頁(yè)面，頁(yè)面路由參數(shù)已經(jīng)改變，但是頁(yè)面內(nèi)容不會(huì)刷新。
問(wèn)題原因：在組件mounted鉤子中調(diào)用的刷新頁(yè)面內(nèi)容，但測(cè)試發(fā)現(xiàn)這個(gè)鉤子沒(méi)有被調(diào)用。后來(lái)發(fā)現(xiàn)App.vue中使用了<keep-alive>：
<template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </template>
keep-alive是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。這就是問(wèn)題所在了。
解決辦法：
使用Vue組件切換過(guò)程鉤子activated(keep-alive組件激活時(shí)調(diào)用)，而不是掛載鉤子mounted：
<script>
export default {
// ...
activated: function() {
this.getCase()
}
}
</script>
關(guān)于keep-alive組件的鉤子：https://cn.vuejs.org/v2/api/#activated
以上這篇Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(méi)有重新加載的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3?+?elementPlus?reset重置表單問(wèn)題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過(guò)程中的一些鉤子函數(shù)，這個(gè)過(guò)程中觸發(fā)的這些函數(shù)能讓你有操作一些其他的事兒的時(shí)機(jī)，這就是導(dǎo)航守衛(wèi)，守衛(wèi)適用于切面編程，即把一件事切成好幾塊，然后分給不同的人去完成，提高工作效率，也可以讓代碼變得更加優(yōu)雅2022-09-09
Vue登錄功能實(shí)現(xiàn)全套詳解(含封裝axios)
登錄功能對(duì)于前端剛?cè)腴T不久的同學(xué)來(lái)說(shuō)較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實(shí)現(xiàn)(含封裝axios)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了一文詳解Vue?的雙端?diff?算法，diff?算法是渲染器中最復(fù)雜的部分，也是面試的熱點(diǎn)問(wèn)題。今天我們就通過(guò)?Vue?的?diff?算法來(lái)探究下diff?算法吧2022-06-06
Vue2中無(wú)法檢測(cè)到數(shù)組變動(dòng)的原因及解決
由于某些限制，vue2不能檢測(cè)到某些情況下數(shù)組的變動(dòng)，本文就將具體講解這兩種限制的解決思路2021-06-06
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問(wèn)題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07