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