vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決
更新時(shí)間：2022年12月06日 15:30:58 作者：她和海水一樣咸
這篇文章主要介紹了vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行
因?yàn)槁酚芍衏reated和mounted默認(rèn)會進(jìn)行緩存的，除非在router.js中配置：keepAlive: false；
這樣是把這個(gè)頁面的路由緩存給關(guān)閉了；true為開啟，false為關(guān)閉；
meta: {
? keepAlive: false
},還有一種辦法就是使用activated鉤子就可以了
1、將要處理的方法，放在activated函數(shù)中
總結(jié)
1、router-view路由跳轉(zhuǎn)使用keep-alive方式
2、created和mounted只執(zhí)行一次
3、使用activated鉤子，每次進(jìn)入頁面執(zhí)行一次
vue created、mounted等方法整理
created：html加載完成之前，執(zhí)行。執(zhí)行順序：父組件-子組件mounted：html加載完成后執(zhí)行。執(zhí)行順序：子組件-父組件methods：事件方法執(zhí)行watch：watch是去監(jiān)聽一個(gè)值的變化，然后執(zhí)行相對應(yīng)的函數(shù)。computed：computed是計(jì)算屬性，也就是依賴其它的屬性計(jì)算所得出最后的值
export default {
? ? ?name: "draw",
? ? ?data(){ ? ? ?// 定義變量source ? ? ? ?
? ? ? ?return {
? ? ? ? ?source:new ol.source.Vector({wrapX: false}),
? ? ? ?}
? ? ?},
? ? props:{ //接收父組件傳遞過來的參數(shù)
? ? ? map:{
? ? ? ? //type:String
? ? ? },
? ? },
mounted(){ ? //頁面初始化方法
? ? if (map==map){
? ? }
? ? var vector = new ol.layer.Vector({
? ? ? source: this.source
? ? });
? ? this.map.addLayer(vector);
? },
? watch: { ? //監(jiān)聽值變化：map值
? ? map:function () {
? ? ? console.log('3333'+this.map);
? ? ? //return this.map
? ? ? console.log('444444'+this.map);
? ? ? var vector = new ol.layer.Vector({
? ? ? ? source: this.source
? ? ? });
? ? ? this.map.addLayer(vector);
? ? }
? },
? methods:{ ? //監(jiān)聽方法 ?click事件等，執(zhí)行drawFeatures方法
? ? ? ?drawFeatures:function(drawType){}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)3
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)，教大家如何在某個(gè)對象中，新增某個(gè)屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對vue-router感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue自定義可選時(shí)間的日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在使用?element?ui?組件過程中，我最近碰到了新的問題，vue--elementui中如何修改el-input樣式呢，今天小編通過示例代碼給大家詳細(xì)講解，需要的朋友參考下吧2023-05-05
vue+vuex+axios實(shí)現(xiàn)登錄、注冊頁權(quán)限攔截
下面小編就為大家分享一篇vue+vuex+axios實(shí)現(xiàn)登錄、注冊頁權(quán)限攔截，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue高版本中一些新特性的使用,需要的朋友可以參考下2018-09-09
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部內(nèi)容，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue發(fā)布到nginx下請求后臺404問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli中設(shè)置publicPath的幾種方式對比
這篇文章主要介紹了vue-cli中設(shè)置publicPath的幾種方式對比，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07