beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
? ? // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
? ? // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
? ? // 可以訪問(wèn)組件實(shí)例 `this`
? },

不能觸發(fā)的原因可以看注釋的第二、三行，只有動(dòng)態(tài)參數(shù)的路徑(/foo/1 和 /foo/2這樣)，才會(huì)調(diào)用。

我嘗試對(duì)router動(dòng)態(tài)處理

vue.$router.push({ path: path , query: { t: (new Date()) }});

這個(gè)場(chǎng)景下，beforeRouteUpdate成功觸發(fā)。

可以考慮修改你的router-link寫法，加個(gè)參數(shù)，代碼示例如下：

<router-link :to="{path:'/home',query: {t: new Date()}}">首頁(yè)</router-link>

當(dāng)然，最主要的是，這個(gè)方法是組件內(nèi)的導(dǎo)航守衛(wèi)，切換路由組件，按你目前的代碼功能來(lá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í)行，頁(yè)面不刷新的解決辦法

beforeRouteEnter和beforeRouteUpdate的坑

beforeRouteEnter是新進(jìn)入的一個(gè)路由，比如進(jìn)入/login登錄界面，會(huì)觸發(fā)beforeRouteEnter這個(gè)鉤子；

而beforeRouteUpdate是路由更新時(shí)觸發(fā)，從主頁(yè)進(jìn)入登錄界面不會(huì)觸發(fā)這個(gè)鉤子函數(shù)，一個(gè)父路由下的子路由跳轉(zhuǎn)會(huì)觸發(fā)這個(gè)鉤子函數(shù)。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.0中組件傳值的幾種方式總結(jié)
這篇文章主要介紹了vue2.0中組件傳值的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue+canvas繪制時(shí)間軸的方法
這篇文章主要為大家詳細(xì)介紹了vue+canvas繪制時(shí)間軸的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問(wèn)題
這篇文章主要介紹了淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問(wèn)題
這篇文章主要介紹了Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
vue組件父子間通信詳解（三）
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
詳解vue 圖片上傳功能
這篇文章主要介紹了vue 圖片上傳功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐
在Vue3中,有時(shí)我們需要直接操作DOM節(jié)點(diǎn)，本文主要介紹了Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))
有的功能需要設(shè)置必填項(xiàng),當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
Vue實(shí)現(xiàn)base64編碼圖片間的切換功能
這篇文章主要介紹了Vue實(shí)現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12