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

目前Vue實戰系列文章已形成了目錄，各位感興趣的朋友歡迎瀏覽：Vue實戰目錄——vue+router+vuex+axios從零實現新聞詳情頁

本項目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自帶的方法打開而已。

ok，我們啟動項目，點擊新聞列表的標題，成功調轉，但是，怎么跳轉到登錄頁了？不應該跳到新聞詳情嗎？什么情況？

仔細想一想，如果我打開一個新窗口，那么這個新窗口里的組件就需要重新創建并掛載，那么原來的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，要采用駝峰法命名，使用的時候可以是這樣子用。

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

Header.vue

App.vue

修改導航文件，去掉Home、About、newAbout等導航，修改默認導航為新聞列表。最后重啟項目：

點擊其中的新聞標題，跳轉到了新聞詳情窗口：

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

---

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

總結

以上是生活随笔為你收集整理的html5怎么改为vue_Vue实战——编程式导航打开新窗口，登录状态本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。