vue使用感受（二）組件間跳轉

昨天我們聊了一下vue的組件間傳值，今天來討論下我遇到的第二個問題組件間跳轉。在不使用前端框架的時候，如果我們要點擊菜單跳轉到指定頁面，一般來說可以使用標籤或者在頁面中嵌套iframe。前者可以改變頁面路徑或者通過錨點來跳轉到頁面指定位置，後者則是在頁面中嵌套一個子頁面，可以部分刷新，改變內容。不過HTML5已經不再支持iframe了，所以要做到部分頁面跳轉等功能，我們可以藉助一下vue。

前言

在vue這邊，如果要跳轉頁面一般是藉助vue-router的，也就是路由。但是路由跳轉到不同地址時，會使得頁面刷新。如果頁面中包含Header、Footer等不需要刷新的組件，用戶可能還是會看到閃了一下，或者載入時候的空白。所以我們需要在不改變路由路徑的情況下，替換頁面部分組件。我找到的方法是使用標籤。如果有大佬有其他方法可以留言告訴我~

接下來我們就從這兩種情況分別談一談。

vue-router

vue的一大特色就是文檔寫得很好，許多問題我們都可以在文檔上找到答案。對於vue-router也是有一個很完善的文檔的，大家可以先去那邊看看。安裝的步驟我這邊也不提了。

https://router.vuejs.org/zh-cn/

我就舉一下我做的測試系統的例子。在安裝完成之後我們在src文件夾下創建一個router.js的文件。如果你使用的是我之前推薦的iView的工程，那這個文件已經建好了。

PS：router.js這個文件的名字其實可以根據你的喜好來改的，只要你在main.js中引入的時候和這個名字一致就可以了。不過狐狸還是推薦你用帶有router字眼的文件名，這樣在多人開發的時候，其他小夥伴可以比較容易理解。

我們先看一下iView那個工程中的router.js寫了什麼。

這邊定義了一個 "/" 路徑，也就是根目錄。表示的是元信息（這個在MC mod開發中也有），我覺得就是這個路徑帶著的一個欄位，可以在下面進行一些對路由的判斷或其他處理。第三個是component，也就是這個路徑對應的組件。這邊的寫法被稱作路由懶載入，也就是在這個路由被訪問的時候才載入對應的組件。在這裡，載入的組件是views文件夾下面的index組件。如果不需要懶載入的話，我們可以寫成這樣。meta如果用不到的話也可以去掉。

路由懶載入

雖然我們可以選擇不用這個，但是既然出現在那裡就很在意啊。那個看起來很高端的樣子，我們就岔開來單獨看看這些到底是啥。首先，我們還是看一看官方文檔。

https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

官方文檔裡面說要結合Vue的非同步組件和Webpack的代碼分割功能。那我們先來看看非同步組件。

https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

這裡說我們可以把組件定義成一個工廠函數。當組件需要渲染的時候觸發工廠函數，並且把結果緩存起來，之後再次渲染的時候可以用。這個工廠函數接收一個的回調，在收到從伺服器下載的組件定義時調用。你可以在工廠函數中返回一個。當使用局部註冊時，也可以直接提供一個返回Promise的函數。

好的上面這段話是官網上的，我盯著看了好久，有種似懂非懂的感覺。百度之後的結果：

工廠函數就是當我調用這個函數時，實際上是先利用類創建了一個對象，然後返回這個對象。

對象代表非同步操作最終完成或者失敗的對象。它是某個函數返回的對象，你可以把回掉函數綁定在這個對象上。

用了promise之後

或者直接把promise藏起來

之前我們在component那邊看到的resolve就是promise對象的一個方法，意思是將當前執行狀態改為resolved，並觸發綁定的所有成功的回調函數。

=>箭頭函數，相當於匿名函數。如果我們把上面這句用一般的方式寫的話，應該是下面這樣。也就是箭頭前面的resolve是傳遞給函數的參數，而箭頭後面則是函數返回的值。這邊是一個require方法。

require.js是一個JS模塊的載入框架，也就是實際上我們按需載入所用到的方法。這個框架使用的是AMD模塊規範（Asynchronous Module Definition），也就是非同步模塊定義。

格式：require([module], callback)

是不是和我們上面return那句很像？也就是說是我們要載入的模塊，是我們的回調函數。不過在ES6中上面這個和import語句是等價的。

好了，解釋了一堆，我們最後發現結果平平無奇。

也就是我們在定義路徑component的位置引入了需要的組件，而不是在文件一開始把所有的都引入。

路由跳轉

話說回來，我們想要的是組件間跳轉。我們在寫好router.js這個文件之後，我們需要修改一下main.js這個文件。

接下來我們看一下app.vue，也就是我們所有組件的容器。這個組件我們在main.js裡面也引入了。這邊的標籤可以渲染路徑匹配到的組件。

我們之前在router.js裡面定義了這個根目錄對應的組件是index.vue，那麼這個index組件就會被載入到標籤的位置。如果說我們網頁運行的地址是，那麼我們在訪問這個地址的時候出來的就是app.vue組件中嵌套著index.vue組件的樣子。

如果我們的第一個頁面是登錄頁，登錄按鈕點擊後跳轉到主頁面，應該怎麼做呢？這裡涉及到路由的跳轉。我們假設我們有兩個組件login.vue和index.vue。我們希望用戶訪問根目錄的時候看到的是登錄頁，點擊後跳轉到這個路徑。那麼router.js可以這樣寫。

我們需要在login這個組件中為登錄按鈕綁定一個點擊事件。

這個login方法中就是一個路由跳轉的方法，具體的使用方法請參考官方文檔。

其他動態切換組件的方式

vue-router基本上能滿足大多數的情況，但如果我們的界面上有很多菜單項，點擊之後都希望頁面中的一部分產生變化，但是又不希望改變路徑的話，vue-router可能就滿足不了了。

PS：如果有可以用router實現的方式，請大佬指正~

vue自帶一個標籤，裡面有一個動態綁定的is屬性，我們可以動態的選擇載入哪一個組件。比如說我們有一個這樣的頁面。

我們的Footer中有兩個按鈕，主頁和通訊錄。我們希望我們在點擊按鈕時，Content部分的組件變化，但是Header和Footer部分不變，路由也不變。那麼我們可以在Content中放入component標籤。（Header部分代碼我就不寫了）

當我們點擊首頁時，觸發setPage方法，把tabView的值設置為MainPage。而tabView動態綁定is屬性，這樣component標籤就會顯示MainPage組件的內容了。通訊錄同理。

以上就是我目前涉及的組件間跳轉的內容。vue-router的應用還很多，推薦大家多看看官方文檔，用著用著就會覺得喵啊。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！