Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(mé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)文章
vue?內(nèi)置組件?component?的用法示例詳解
這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇開(kāi)始功能模塊的開(kāi)發(fā)，首先完成ABP模板自帶的身份認(rèn)證管理模塊和租戶管理模塊。同樣的，參考ABP的Angular版本來(lái)做。2021-05-05
Vue中Class和Style實(shí)現(xiàn)v-bind綁定的幾種用法
項(xiàng)目開(kāi)發(fā)中給元素添加/刪除 class 是非常常見(jiàn)的行為之一， 例如網(wǎng)站導(dǎo)航都會(huì)給選中項(xiàng)添加一個(gè) active 類用來(lái)區(qū)別選與未選中的樣式，那么在 vue 中 我們?nèi)绾翁幚磉@類的效果呢？下面我們就一起來(lái)了解一下2021-05-05
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue解決ajax跨域的問(wèn)題，跨域請(qǐng)求：是指協(xié)議名、主機(jī)名、端口號(hào)三者有任何一個(gè)不一樣，而且跨域請(qǐng)求是請(qǐng)求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒(méi)有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀2023-04-04
vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案
這篇文章主要介紹了vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vuex?mutations的兩種調(diào)用方法小結(jié)
這篇文章主要介紹了vuex?mutations的兩種調(diào)用方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue使用國(guó)密SM4進(jìn)行加密、解密的過(guò)程
國(guó)密SM4算法是一種對(duì)稱加密算法，適用于對(duì)稱密鑰加密和解密的場(chǎng)景，這篇文章主要介紹了vue使用國(guó)密SM4進(jìn)行加密、解密,需要的朋友可以參考下2023-07-07