vue-router3.0版本中 router.push 不能刷新頁(yè)面的問(wèn)題
在 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)有寫版本號(hào)，但 vue-router 明明寫了版本號(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ì)知道？
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來(lái)引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè)，單個(gè)的文件，下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中集成Electron,包括安裝electron和electron-builder兩個(gè)依賴,以及配置.npmrc文件和手動(dòng)修改鏡像源的方法,整個(gè)過(guò)程詳細(xì)記錄了從創(chuàng)建項(xiàng)目、安裝依賴、修改配置、到最終打包部署的每一步2024-10-10
vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
前端vue+element使用SM4國(guó)密加密解密的詳細(xì)實(shí)例
國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國(guó)密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03
在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解
Netlify 帶有內(nèi)置表單處理功能，可以用來(lái)存儲(chǔ)表單數(shù)據(jù)，下載 csv 文件，同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過(guò)配置 webhook 發(fā)送請(qǐng)求。這篇文章主要介紹了在 Vue 應(yīng)用中使用 Netlify 表單功能,需要的朋友可以參考下2019-06-06
vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue數(shù)據(jù)操作之點(diǎn)擊事件實(shí)現(xiàn)num加減功能示例
這篇文章主要介紹了vue數(shù)據(jù)操作之點(diǎn)擊事件實(shí)現(xiàn)num加減功能,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
vue中的v-model原理,與組件自定義v-model詳解
這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解
應(yīng)公司需求,接口需要對(duì)接vue,記錄一下碰到的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue3為什么這么快,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09