vue-router3.0版本中 router.push 不能刷新頁面的問題
在 github 的 vue-router 中找到同樣的一個(gè)問題：3.0.1版本通過router實(shí)例無法跳轉(zhuǎn)
昨天發(fā)現(xiàn)有些路由不能正常跳轉(zhuǎn)，找了一下發(fā)現(xiàn)都是那些實(shí)例化后使用 router.push 而不是直接使用 this.$router.push 的地方。
出現(xiàn)的情況是 router.push 后，url變化了，但是頁面沒有刷新，手動(dòng)刷新一下才出現(xiàn)應(yīng)有的畫面。
我看了一下 package.json，我的 vue 和 axios 是沒有寫版本號(hào)，但 vue-router 明明寫了版本號(hào)，怎么可能以前行的，現(xiàn)在就不行了呢？
然后，我使用 npm view vue-router 查看后才發(fā)現(xiàn)使用的已經(jīng)不是 package.json 中的版本了，于是斷定也許是我前幾天 npm update 了！
( 以后不要隨便 update 了! )
具體為什么新版本不行了，我也不太清楚。
最簡單的解決辦法當(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īng)該是因?yàn)樗c全局的vue中的 this.$router 的不是同一個(gè)，而之前的版本中能直接這樣使用，應(yīng)該是使用了單例。
至于為什么不使用單例了，這個(gè)我怎么會(huì)知道？
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡單多語操作
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡單多語操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問題的解決方法,需要的朋友可以參考下2018-02-02
vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3中的watch和watchEffect實(shí)例詳解
watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3中watch和watchEffect的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了，還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別？今天，我們就一起來學(xué)習(xí)一下，將解釋它們的區(qū)別，快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下2023-09-09
Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。2017-06-06