vue-router的beforeRouteUpdate不觸發(fā)問題
更新時間：2022年04月14日 11:37:54 作者：PrinciplesMan
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-router beforeRouteUpdate不觸發(fā)
官方對于beforeRouteUpdate的解釋如下：
beforeRouteUpdate (to, from, next) {
? ? // 在當前路由改變，但是該組件被復(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>當然，最主要的是，這個方法是組件內(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)文章
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數(shù)據(jù),并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue框架下部署上線后刷新報404問題解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了VUE的數(shù)據(jù)代理與事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于vue路由中前進后退的一些事兒，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue路由具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Teleport 提供了一種干凈的方法，允許我們控制在 DOM 中哪個父節(jié)點下渲染了 HTML，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€組件。2021-05-05
Vue+UpLoad實現(xiàn)上傳預(yù)覽和刪除圖片的實踐
本文主要介紹了Vue+UpLoad實現(xiàn)上傳預(yù)覽和刪除圖片的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue實現(xiàn)靠邊懸浮球(PC端)效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05