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