vue引用本地圖片地址遍歷無法被瀏覽器編譯解析的問題

前言：由於工作原因，一直沒有時間更博，今天就寫一下用vue的時候踩過的一些坑

在做項目的過程中，讓我印象最深刻的問題有兩個：

（1）在同一個頁面上重複使用同一個組件的時候，數據源污染，在第二個數據加載的時候把第一個數據源給衝突了的情況

這個問題當時整整搞了兩個小時，後來纔想到，對象作用域隔離的問題，也就是scope,怎麼說呢？也就是你想在同一個頁面重複使用同一個組件的時候，那你樣式肯定是不一樣的，這時候你就在可以在當前頁面下的樣式里加入scope,實現作用域隔離。

（2）爲什麼用import引入圖片無效，用require就可以呢？其實這就要講到import和require的區別了,雖然他們兩個遵守的規範是不一樣的，但是從本質上來講，其實兩者都可以使用引入，但是在解析的時候內部是不一樣的,require是運行時調用，import是編譯時調用

本質

• require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
• import是解構過程，但是目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼爲ES5再執行，import語法會被轉碼爲require

（3）爲什麼發請求的時候會出現option預請求？其實這是跨域造成的，因爲我們在項目中沒有設置跨域就直接用axios發起請求。那說這麼多，其實Preflighted Requests是CORS中一種透明服務器驗證機制。預檢請求首先需要向另外一個域名的資源發送一個 HTTP OPTIONS 請求頭，其目的就是爲了判斷實際發送的請求是否是安全的。解決這個問題的實際方法是直接到我們的config-index.js配置文件下設置我們的proxytable代理地址即可。

（4）我們頁面中經常會用到緩存，那其實我們都知道vue中用keep-alive做我們的頁面緩存是存在很多坑的，比如在keep-alive中的在跳轉到指定的路由時刷新對應的路由，其餘不刷新。這個問題就是我們的keep-alive緩存搞的鬼，那解決這個問題其實也很簡單。

有幾種解決方式

1.在keep-alive中直接添加 include，cachedViews（Array類型：包含vue文件的組件name都將被緩存起來）；反之exclude則是不包含；

　　注意：所有.vue組件文件都必須附上name屬性！！！建議用vuex管理cachedViews

1 2 3

<keep-alive :include="cachedViews">       <router-view></router-view> </keep-alive>

　　2.監測$router的變化；

1 2 3 4

watch: {     // 如果路由有變化，會再次執行該方法    "$route": "fetchDate" }

　　但是會在頁面離開時再次執行fetchDate，並不是我們需要的，所以可以在to和from上添加執行邏輯，但也是十分的麻煩

1 2 3 4 5 6 7 8

//$router是隻讀狀態，所以賦值操作會失效 watch: {     $route (to, from) {         if（list.indexOf(from.path) > -1）{ //自行添加邏輯，list爲你不想有緩存的路徑 　　　　　　　　this.getData()         }   　　} }

　　3.在添加keep-alive後會增加兩個生命週期mounted>activated、離開時執行deactivated，路由的進入和切換回相應的觸發activated和deactivated，這樣就可以在每次入路由執行更細緻的操作了

1 2 3 4 5

//如果是服務端渲染就算了 activated() {     //只刷新數據，不改變整體的緩存     this.fetchDate();  }

　　4.還有更簡單粗暴的

1 2 3 4 5 6

//我就笑笑不說話<br><div>     <keep-alive>         <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>     <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

　　5.還有種情況，在不同路由應用了相同的vue組件

1 2	{path:'aaa',component:Mompage,name:'mom'}, {path:'bbb',component:Mompage,name:'momPlus'}

　　默認情況下當這兩個頁面切換時並不會觸發vue的created或者mounted鉤子，需要手動的watch:$router（又回到上面的步驟），或者在router-view上加上唯一值。

1 2 3 4 5 6 7

//隨便抄一段代碼過來 <router-view :key="key"></router-view> computed: {     key() {         return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()     }  }

　　有錯誤的，請指出