Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
更新時(shí)間：2020年07月21日 09:02:54 作者：Sun~Neo
這篇文章主要介紹了Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
版權(quán)
1、<router-view ></router-view> 外層包圍<keep-alive> </keep-alive>
keep-alive作用將組件實(shí)例緩存下來
<keep-alive> <router-view></router-view> </keep-alive>
2、清除組件緩存
使用keep-alive 的 exclude="組件名" 屬性
<keep-alive exclude="home">
<router-view ></router-view>
</keep-alive>
補(bǔ)充知識(shí)：vue 簡(jiǎn)單的頁面刷新或者跳轉(zhuǎn)頁面的數(shù)據(jù)保存問題
當(dāng)我們想刷新頁面也保存當(dāng)時(shí)的數(shù)據(jù)的時(shí)候，會(huì)遇到這樣那樣的問題，其實(shí)，僅僅的幾行代碼就什么都解決了，下面是代碼（js）：
var vm = new Vue({
el:'.search_moduel',
data:{
history:[] //存儲(chǔ)查詢歷史記錄的數(shù)據(jù)
},
methods:{
//刷新頁面或者從別的頁面進(jìn)入，提取this.history的值
getPageData:function(){
this.history = JSON.parse(localStorage.getItem('this.history'));//使用getItem方法的前提是，你再自己需要的地方使用了setItem方法
}
},
//鉤子函數(shù)，在實(shí)例被創(chuàng)建之后被調(diào)用，調(diào)用getPageData()
created:function(){
this.getPageData();
}
});
以上這篇Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue router學(xué)習(xí)之動(dòng)態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動(dòng)態(tài)路由和嵌套路由，詳細(xì)的介紹了動(dòng)態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了跟混亂的頁面彈窗說再見，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue組件添加事件@click.native操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法
這篇文章主要介紹了詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
vue 根據(jù)選擇的月份動(dòng)態(tài)展示日期對(duì)應(yīng)的星期幾
這篇文章主要介紹了vue 如何根據(jù)選擇的月份動(dòng)態(tài)展示日期對(duì)應(yīng)的星期幾，幫助大家更好的利用vue框架處理日期需求，感興趣的朋友可以了解下2021-02-02
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11
vue 解決data中定義圖片相對(duì)路徑頁面不顯示的問題
這篇文章主要介紹了vue 解決data中定義圖片相對(duì)路徑頁面不顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04