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