程式狂想筆記

一個攻城師奮鬥史

0%

vuejs hook和router hook小記

vuejs hook和router hook小記

檔案

心得/紀錄:

Vue hook

  1. beforeCreate不會抓到this屬性(props,data),原因還沒被做出來

  2. component剛建立出來,不會觸發到beforeUpdate,updated,只有template被更新的時候會觸發,但是!!!改data…等等沒觸發到template也不會有問題

Vue Router hook

  1. 進行第2次寫入,不會有效果,一樣保持第一次beforeEach hook東西,也許這跟event沒有關係,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
        //測試router hook
    router.beforeEach((to,from,next)=>{
    console.log('1');
    });

    <!-- 進行第2次寫入,不會有效果,一樣保持第一次beforeEach hook東西
    也沒有看到文件說明 -->
    router.beforeEach((to,from,next)=>{
    console.log('2');
    console.log(to);
    console.log(from);
    console.log(next);
    });
  2. Vue scrollBehavior 滚动行为,詳細看範例,這篇不好讀
    Vue scrollBehavior 滚动行为 - 悦涵 - 博客园

  3. 全域router hook的this,應該是指router變數結果…我console.log出來是underfined

子組件 hook

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不!能!獲取組件實例 `this`
    // 因為當守衛執行前,組件實例還沒被創建
    },
    beforeRouteUpdate (to, from, next) {
    // 在當前路由改變,但是該組件被覆用時調用
    // 舉例來說,對於一個帶有動態參數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
    // 由於會渲染同樣的 Foo 組件,因此組件實例會被覆用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
    },
    beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
    }

meta 這方面就看官網範例,可以看一下範例註解

順便一提,css有一個scroll-behavior - CSS: Cascading Style Sheets | MDN
但是跟vue沒關係

理解 $nextTick 的作用還沒有研究,剩下就是vuex

參考來源:
javascript - vue-router钩子beforeRouteEnter函数获取到this实例 - SegmentFault 思否
路由元信息 | Vue Router
导航守卫 | Vue Router
scroll-behavior - CSS: Cascading Style Sheets | MDN
Vue scrollBehavior 滚动行为 - 悦涵 - 博客园
理解 $nextTick 的作用
vue2学习篇一 vue-router 导航钩子 丨 智杰之家 - 关注互联网开发