vue-router的beforeRouteUpdate不觸發(fā)問題
更新時間：2022年04月14日 11:37:54 作者：PrinciplesMan
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-router beforeRouteUpdate不觸發(fā)
官方對于beforeRouteUpdate的解釋如下：
beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
? ? // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
? ? // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
? ? // 可以訪問組件實例 `this`
? },不能觸發(fā)的原因可以看注釋的第二、三行，只有動態(tài)參數(shù)的路徑(/foo/1 和 /foo/2這樣)，才會調(diào)用。
我嘗試對router動態(tài)處理
vue.$router.push({ path: path , query: { t: (new Date()) }});這個場景下，beforeRouteUpdate成功觸發(fā)。
可以考慮修改你的router-link寫法，加個參數(shù)，代碼示例如下：
<router-link :to="{path:'/home',query: {t: new Date()}}">首頁</router-link>當(dāng)然，最主要的是，這個方法是組件內(nèi)的導(dǎo)航守衛(wèi)，切換路由組件，按你目前的代碼功能來看，如果想觸發(fā)，
除了router-link要帶參數(shù)，還需要修改router-view
<keep-alive> ? <router-view></router-view> </keep-alive>
另外可以采用如下解決辦法：
?watch: {
? ? $route(to, from) {
? ? ? ? console.log(to);
? ? ? ? console.log(from);
? ? }
? }同樣試用 vue-router路由跳轉(zhuǎn)created不執(zhí)行，頁面不刷新的解決辦法
beforeRouteEnter和beforeRouteUpdate的坑
beforeRouteEnter是新進入的一個路由，比如進入/login登錄界面，會觸發(fā)beforeRouteEnter這個鉤子；
而beforeRouteUpdate是路由更新時觸發(fā)，從主頁進入登錄界面不會觸發(fā)這個鉤子函數(shù)，一個父路由下的子路由跳轉(zhuǎn)會觸發(fā)這個鉤子函數(shù)。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2.0中組件傳值的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue+canvas繪制時間軸的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了淺談vue 二級路由嵌套和二級路由高亮問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue中ElementUI結(jié)合transform使用時如何修復(fù)el-select彈框定位不準(zhǔn)確問題
這篇文章主要介紹了Vue中ElementUI結(jié)合transform使用時如何修復(fù)el-select彈框定位不準(zhǔn)確問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue 圖片上傳功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vite中的glob-import批量導(dǎo)入的實現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在Vue3中,有時我們需要直接操作DOM節(jié)點，本文主要介紹了Vue3獲取和操作DOM元素的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
vue?el-input設(shè)置必填提示功能(單個與多個)
有的功能需要設(shè)置必填項,當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個與多個)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue實現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12