首頁 > web前端 > js教程 > 主體

完美解決vue-router3.0版本router.push無法重新整理頁面

php中世界最好的语言
發布: 2018-05-30 14:44:52
原創
7280 人瀏覽過

這次帶給大家完美解決vue-router3.0版本router.push無法刷新頁面,解決vue-router3.0版本router.push無法刷新頁面的注意事項有哪些,下面就是實戰案例,一起來看一下。

在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 的不是同一個,而之前的版本中能直接這樣使用,應該是使用了單例。

至於為什麼不使用單例了,這個我怎麼會知道?

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Angular路由內路由守衛該如何使用

React如何在react-router路由實現登陸驗證控制

以上是完美解決vue-router3.0版本router.push無法重新整理頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板