iT邦幫忙

0

為什麼,手動輸入parameters,按下Enter,瀏覽器沒有動作

  • 分享至 

  • xImage

大家好,我想請教一個小問題。
我的環境是Vite、Vue3。
vue router是用hash模式。
像是這樣:192.168.111.222/#/
目前有三個頁面,網址列分別是
(1)192.168.111.222/#/aaa/
(2)192.168.111.222/#/bbb/
(3)192.168.111.222/#/ccc/

每頁都是利用Axios向後端request資料。
因為,要讓後端的人debug時,比較方便看到回傳的資料。
不用在操作postman時,還要先去資料庫找id,再來測試。

所以我就在網址列,夾帶一個參數:mytest=9898,像是192.168.111.222/#/?mytest=9898
用來判斷是否是自己的測試人員,才顯示回傳的資料內容。
避免一般人操作時,也暴露一些重要的資料,如id。
判斷的JS,如下:

//myTest.js
export default function(res){
    let href = window.location.href
    let result = href.search('mytest=9898')
    //如果有mytest
    if(result > 0){
        //顯示request
        console.log(res);
    }     
}

然後我會在其他頁面這樣寫:

import myTest from './assets/js/myTest'
axios.post(`網址`,formData)
.then((res)=>{
    myTest(res.data)
    .........
    ...
})

現在有個小問題,
當原本網址是192.168.111.222/#/aaa,
手動輸入參數192.168.111.222/#/aaa?mytest=9898後按下Enter,
為什麼瀏覽器什麼動作都沒有!?(沒有request、沒有重整)
必須再按下第二次Enter才會request跟重整。
但是我測試網址改成192.168.111.222/#/bbb
按一下Enter,就會request,並且換頁了。

雖然只要按兩次enter就能解決這個問題,
但還是好奇背後的原理是什麼?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
無敵銅金剛
iT邦新手 5 級 ‧ 2022-04-29 12:36:49
最佳解答

一般來說是因為router的機制導致同路由的元件會被重複使用,不會銷毀後重建,這樣效率會高一點。

如果要重新使用,可以監聽router。
補充:也可以監聽router的params

詳細請看這裡:
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

我要發表回答

立即登入回答