vue重新整理頁面空白分兩種情況

2022-04-08 05:17:07 字數 853 閱讀 8169

問題出現原因:

1.在history模式下的404空白

2.在history模式下存在多級路由時,頁面路由跳轉是ok的,但當二級以上路由時,瀏覽器直接重新整理頁面會空白

先說解決方案:

1.在history模式下的404空白 * 後台或者nignx伺服器發現404時,直接重定向到index.html就可以解決

2.在history模式下存在多級路由時,頁面路由跳轉是ok的,但當二級以上路由時,瀏覽器直接重新整理頁面會空白 * 如果你是老的vue專案,找到publicpath:""改成publicpath:"/" * 如果你是最新的vue腳手架搭建的,在專案中找到這個檔案node_modules/@vue/cli-service/lib/options.js,然後把裡面的baseurl:""改成baseurl:"/"就可以了 備註:修改完配置記得重新啟動下開發模式 ?

原因:1.在history模式下的404空白 * 這種網上已經說了很多了,你在history模式下時,你會發現這種url方式你直接回車,它是會以http get方式請求後台,但是後台沒有你這個請求路徑,所以會報404,而這個路徑是前台自己定義的,所以要由前台處理,因為vue單頁面應用,所以它只有乙個頁面index.html,所以一旦後台或者nignx 404了,就讓它重定向到index.html,這樣前台獲取了這個路徑,它就會根據自己路由來處理了

b.如果你是新的vue專案,你會發現沒有配置publicpath的地方,因為新的vue專案publicpath是獲取baseurl欄位的值,所以在這個路徑下node_modules/@vue/cli-service/lib/options.js把baseurl:""改成baseurl:"/" ?

注意:hash模式下,可能需要改成相對路徑,目前我沒測試過。

Vue重新整理頁面功能

在使用vue開發過程中,有時候修改了一些資料或者提交了表單以後需要重新整理當前頁面,js中有很多方法都可以重新整理頁面,但是我覺得都不是很友好,會突然整個頁面白了一下,相當於按了f5重新整理頁面。最近看到了大神們的做法,也實現了一下,感覺挺不錯的。isrouteralive router view ...

vue中重新整理頁面

當我們頁面中有資料發生變化或者進行了某些操作的時候,需要將變化後的結果展示,也就是重新整理頁面,像f5這種重新整理會導致頁面閃爍,還有 window.reload 或者router.go 0 重新整理時也是,使用者體驗很差,所以我們需要一種頁面不抖動的重新整理方式 解決辦法 在需要的地方使用this...

動態路由下重新整理 頁面空白

前言 最近設計動態路由時,重新整理頁面空白。突然想起以前筆記裡面記錄過,翻看了下,今天得空兒分享出來。問題描述 在全域性前置守衛router.beforeeach裡面加入動態路由設計時,重新整理動態頁面,明明router已經生成了,結果還是空白,列印後發現to物件裡面除了path其餘屬性皆為空值 如...