近日來，我陸續的分享了vue相關的系列文章，以新聞列表專案為載體，實戰的方式介紹了vue及其周邊的技術。本文承接前文，不斷通過專案迭代的方式繼續分享vue相關的知識。

本專案git地址：

https://gitee.com/vuejslearn/news-list.git

開啟專案，點選新聞列表的標題，視窗切換到了新聞詳情，但是如果我想回去的話，還得點選導航欄，比較麻煩，有沒有可能開啟一個新視窗來展示新聞詳情呢？這樣我再看列表就會更加方便了。答案是有的，開啟檔案newsList.vue修改goDetail函式：

具體的程式碼：

let routerUrl = this.$router.resolve({ path: '/detail', query: { content: content } }) window.open(routerUrl.href, '_blank')

短短几行程式碼就讓我們的本頁切換，變成了新視窗打開了。其實背後的方式就是用router獲取url，然後通過window自帶的方法開啟而已。

仔細想一想，如果我開啟一個新視窗，那麼這個新窗口裡的元件就需要重新建立並掛載，那麼原來的vuex裡的狀態是不是就重置啦？因此，就跳到登入頁了。如果想成功跳轉，就必須讓登入狀態能誇視窗，那怎麼辦呢？如果將狀態儲存到本地，像cookie那樣，是不是就可以了？那該怎麼做呢？很簡單，用：

localStorage.setItem(key,value)

儲存就行啦，一行程式碼，就可以將資料儲存到本地啦。如果讀取的話就用：

localStorage.getItem(key)

就可以從本地讀取了，是不是很簡單？ok，開始改造vuex，將狀態改成本地儲存：

修改login.vue的登入函式，新增儲存原生代碼：

修改導航路由檔案的全域性前置守衛，將由vuex判斷登入狀態改為從本地獲取：

然後去掉store的引入，重啟專案，發現，成功的跳轉到詳情頁了。但是這個導航欄，怎麼看著那麼的難看呢，我們優化一下導航欄吧。

1.在views裡新建Header.vue檔案。這裡介紹一下vue的檔案命名，如果是一個單詞的檔案，必須要大寫開頭，比如header.vue就是錯的，因為小寫字母會被vue當成系統標籤。如果是多單詞檔案，比如：BaseHeader.vue，要採用駝峰法命名，使用的時候可以是<base-header>這樣子用。

2.將App.vue裡的導航div模組，放到Header.vue裡，同時把樣式程式碼也拿過去。然後去掉Home、About、newAbout這些沒用的導航。最後的樣子：

修改導航檔案，去掉Home、About、newAbout等導航，修改預設導航為新聞列表。最後重啟專案：

OK，本文暫時介紹到這裡。相關程式碼以提交到git上，感興趣的朋友可以拉下程式碼看一下，親自執行一下。

原創不容易，鑑於本人水平有限，文中如有錯誤之處歡迎大家指正。以後我會持續釋出vue實戰系列的文章，喜歡的朋友歡迎關注。