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