vue-router 3.0版本中 router.push 不能刷新頁(yè)面的問(wèn)題

xingqiba 發(fā)布于2019-08-22 17:06 / 3068人閱讀

摘要：分析原因?qū)嵗蟮牟荒芩⑿马?yè)面，應(yīng)該是因?yàn)樗c全局的中的的不是同一個(gè)，而之前的版本中能直接這樣使用，應(yīng)該是使用了單例。

在 github 的 vue-router 中找到同樣的一個(gè)問(wèn)題：
3.0.1版本通過(guò)router實(shí)例無(wú)法跳轉(zhuǎn)

昨天發(fā)現(xiàn)有些路由不能正常跳轉(zhuǎn)，找了一下發(fā)現(xiàn)都是那些實(shí)例化后使用 router.push 而不是直接使用 this.$router.push 的地方。
出現(xiàn)的情況是 router.push 后，url變化了，但是頁(yè)面沒(méi)有刷新，手動(dòng)刷新一下才出現(xiàn)應(yīng)有的畫(huà)面。

我看了一下 package.json，我的 vue 和 axios 是沒(méi)有寫(xiě)版本號(hào)，但 vue-router 明明寫(xiě)了版本號(hào)，怎么可能以前行的，現(xiàn)在就不行了呢？

然后，我使用 npm view vue-router 查看后才發(fā)現(xiàn)使用的已經(jīng)不是 package.json 中的版本了，于是斷定也許是我前幾天 npm update 了！

( 以后不要隨便 update 了! )

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

但是，如果這樣可以的話，我當(dāng)初為什么要在組件內(nèi)再實(shí)例化一個(gè) Router 呢？
顯然是因?yàn)橛行┑胤降?this 并不是 vue,那么，再實(shí)例化一個(gè) vue，然后使用 vue.$router 行嗎？
答案當(dāng)然是不行的，因?yàn)檫@個(gè) vue 與其它地方的 vue 應(yīng)該又不是同一個(gè)對(duì)象了。

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

window.router=router

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

分析原因：
實(shí)例后的 router 不能刷新頁(yè)面，應(yīng)該是因?yàn)樗c全局的vue中的 this.$router 的不是同一個(gè)，而之前的版本中能直接這樣使用，應(yīng)該是使用了單例。
至于為什么不使用單例了，這個(gè)我怎么會(huì)知道？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94865.html

相關(guān)文章

手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過(guò)后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開(kāi)始進(jìn)行下面的步驟了。全局安裝的包名稱(chēng)由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過(guò)卸載它。中的非常類(lèi)似于事件每個(gè)都有一個(gè)字符串的事件類(lèi)型和一個(gè)回調(diào)函數(shù)。視頻教程由于思否不支持視頻外鏈，視頻請(qǐng)移步http://www.henrongyi.top 你能學(xué)到什么在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開(kāi)始學(xué)習(xí)在我們工作開(kāi)...

Sourcelink 2019-08-02 14:02 評(píng)論0 收藏0
手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過(guò)后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開(kāi)始進(jìn)行下面的步驟了。全局安裝的包名稱(chēng)由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過(guò)卸載它。中的非常類(lèi)似于事件每個(gè)都有一個(gè)字符串的事件類(lèi)型和一個(gè)回調(diào)函數(shù)。視頻教程由于思否不支持視頻外鏈，視頻請(qǐng)移步http://www.henrongyi.top 你能學(xué)到什么在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開(kāi)始學(xué)習(xí)在我們工作開(kāi)...

AlphaWallet 2019-08-23 14:28 評(píng)論0 收藏0
新手使用vue-router傳參時(shí)注意事項(xiàng)

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

microcosm1994 2019-08-02 15:14 評(píng)論0 收藏0
新手使用vue-router傳參時(shí)注意事項(xiàng)

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

clasnake 2019-08-23 17:58 評(píng)論0 收藏0
Vue-router基本學(xué)習(xí)（1）

摘要：?jiǎn)雾?yè)面應(yīng)用網(wǎng)頁(yè)只有在第一次進(jìn)入頁(yè)面的的時(shí)候請(qǐng)求服務(wù)器的文件，接下來(lái)的頁(yè)面跳轉(zhuǎn)是基于內(nèi)部的。單頁(yè)面應(yīng)用第一次要將所有的資源全部加載，所以首屏?xí)r間慢，但是后續(xù)的跳轉(zhuǎn)不需要再次向服務(wù)器發(fā)請(qǐng)求。多頁(yè)面應(yīng)用:網(wǎng)頁(yè)HTML文件是請(qǐng)求后臺(tái)發(fā)過(guò)來(lái)的。每次切換頁(yè)面都會(huì)從后臺(tái)把頁(yè)面文件傳輸回來(lái)。單頁(yè)面應(yīng)用:網(wǎng)頁(yè)只有在第一次進(jìn)入頁(yè)面的、的時(shí)候請(qǐng)求服務(wù)器的HTML文件，接下來(lái)的頁(yè)面跳轉(zhuǎn)是基于內(nèi)部的route...

IamDLY 2019-08-26 13:30 評(píng)論0 收藏0