vue-router 3.0版本中 router.push 不能刷新頁面的問題

xingqiba 發布于2019-08-22 17:06 / 3049人閱讀

摘要：分析原因實例后的不能刷新頁面，應該是因為它與全局的中的的不是同一個，而之前的版本中能直接這樣使用，應該是使用了單例。

在 github 的 vue-router 中找到同樣的一個問題：
3.0.1版本通過router實例無法跳轉

昨天發現有些路由不能正常跳轉，找了一下發現都是那些實例化后使用 router.push 而不是直接使用 this.$router.push 的地方。
出現的情況是 router.push 后，url變化了，但是頁面沒有刷新，手動刷新一下才出現應有的畫面。

我看了一下 package.json，我的 vue 和 axios 是沒有寫版本號，但 vue-router 明明寫了版本號，怎么可能以前行的，現在就不行了呢？

然后，我使用 npm view vue-router 查看后才發現使用的已經不是 package.json 中的版本了，于是斷定也許是我前幾天 npm update 了！

( 以后不要隨便 update 了! )

具體為什么新版本不行了，我也不太清楚。
最簡單的解決辦法當然是直接把 router.push 改成 this.$router.push

但是，如果這樣可以的話，我當初為什么要在組件內再實例化一個 Router 呢？
顯然是因為有些地方的 this 并不是 vue,那么，再實例化一個 vue，然后使用 vue.$router 行嗎？
答案當然是不行的，因為這個 vue 與其它地方的 vue 應該又不是同一個對象了。

那么，終極的解決方案就是：
把全局的 vue 中的 router 加到 window 中，也就在 main.js 中使用：

window.router=router

然后其它任何地方就可以直接愉快地使用 router.push 等 router 的方法了。

分析原因：
實例后的 router 不能刷新頁面，應該是因為它與全局的vue中的 this.$router 的不是同一個，而之前的版本中能直接這樣使用，應該是使用了單例。
至于為什么不使用單例了，這個我怎么會知道？

GPU云服務器云服務器 java中刷新頁面 java中頁面刷新 js中dom刷新頁面不能忽視的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94865.html

手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。視頻教程由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學到什么在這一期的學習進度中，我們會開始學習在我們工作開...

Sourcelink 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。視頻教程由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學到什么在這一期的學習進度中，我們會開始學習在我們工作開...

AlphaWallet 2019-08-23 14:28 評論0 收藏0
新手使用vue-router傳參時注意事項

摘要：使用和組合傳參路由配置獲取參數刷新參數丟失顯示注意此方法第一次跳轉是沒有問題的，參數也可以傳過去，但是刷新頁面后，參數就沒了這個地方其實還有一個問題，當你傳遞的參數是類型，第一次是沒有問題的，獲取的時候也是類型，但是當你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...

microcosm1994 2019-08-02 15:14 評論0 收藏0
新手使用vue-router傳參時注意事項

摘要：使用和組合傳參路由配置獲取參數刷新參數丟失顯示注意此方法第一次跳轉是沒有問題的，參數也可以傳過去，但是刷新頁面后，參數就沒了這個地方其實還有一個問題，當你傳遞的參數是類型，第一次是沒有問題的，獲取的時候也是類型，但是當你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...

clasnake 2019-08-23 17:58 評論0 收藏0
Vue-router基本學習（1）

摘要：單頁面應用網頁只有在第一次進入頁面的的時候請求服務器的文件，接下來的頁面跳轉是基于內部的。單頁面應用第一次要將所有的資源全部加載，所以首屏時間慢，但是后續的跳轉不需要再次向服務器發請求。多頁面應用:網頁HTML文件是請求后臺發過來的。每次切換頁面都會從后臺把頁面文件傳輸回來。單頁面應用:網頁只有在第一次進入頁面的、的時候請求服務器的HTML文件，接下來的頁面跳轉是基于內部的route...

IamDLY 2019-08-26 13:30 評論0 收藏0