Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly

53850955f15249a1a9dc49df6113e400?s=47 LINE Developers
September 18, 2020

Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly

生田望 (LINE株式会社)
「UIT meetup vol.10 『Vue 三昧』」での発表資料です
https://uit.connpass.com/event/187267/

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers

September 18, 2020
Tweet

Transcript

  1. Nozomu Ikuta 2020/09/18 Vue Router Next ҙ֎ͱޠΒΕͳ͍ Vue 3 ࣌୅ͷϧʔςΟϯά

  2. Who I am ඵͰΘ͔Δϫλγ • ੜా๬ / Nozomu Ikuta •

    Verdaࣨ UI Engineering νʔϜ /
 UIT Dev 2 νʔϜ • Twitter: @NozomuIkuta
  3. Why Talk about Vue Router ࣮͸େܕΞοϓσʔτ • Vue 3 ͸

    ΋ͪΖΜΈͳ͞Μڵຯ௡ʑ • Vuex 4 ͸ state ͷ Type Support Ͱ TypeScripter ͕׻ت • Vue Router 4 ͸Έͳ͞Μڵຯͳ͠…? • ࣮͸ Vue 3 / Vuex 4 ฒΈʹັྗతͳΞοϓσʔτ͕͋Δ͜ͱΛ఻͍͑ͨ • ʮVue ࡾດʯ͔ͩΒͦ͜
  4. Router Factory `new` ͡Όͳ͍ͷ͕৽͍͠ • Vue 3 ΍ Vuex 4

    ʹͳΒ͍ `new VueRouter()` Ͱ͸ͳ͘ `createRouter()` ʹมߋ • `history ` Φϓγϣϯ΋ؔ਺Λ౉͢Α͏ʹͳͬͯ tree-shakable ʹ
  5. Route Composition Function จࣈ௨ΓʮϧʔτΛ࢖͏ʯ • `setup()` ؔ਺Ͱ͸ `this.$route` ͕࢖༻ෆՄ •

    ୅ΘΓʹ `useRoute()` ίϯϙδγϣϯؔ਺Λ࢖ͬͯ࿈ܞ
  6. Route Meta Merge ΋͏୳͞ͳ͍͍ͯ͘ • ࢠϧʔτͷ `meta` ͸਌ͷ `meta` ͱ

    shallow merge ͞ΕΔΑ͏ʹมߋ • ਌ route ͷ access control ϑϥάΛࢠ route Ͱ΋௚઀ࢀরͰ͖Δʂ
  7. Router Link Scoped Slot Ϣʔɾϋϒɾίϯτϩʔϧ • Default slot ͸Ҿ͖ଓ͖݈ࡏ •

    `tag` prop ͱ `event` prop ͸ഇࢭ • `custom` prop + scoped slot ͰϑϧΧελϜʂ • Default scoped slot Ͱ `slotProps` Λड͚औͬͯ
 custom component ΋׬શ੍ޚʂ
  8. Router Link Active ࢥͬͨ௨ΓʹΞΫςΟϒʹ • active ͔Ͳ͏͔ͷ൑ఆج४͕ΑΓ௚؍తʹʂʢৄࡉ͸ׂѪ ʣ • `exact`

    prop ͸ഇࢭ • ΤΠϦΞε΋ active ͷ൑ఆର৅ʹ • URL ΫΤϦ͸ active ൑ఆͷର৅֎ʹʢηϧϑαʔϏεʹมߋʣ
  9. Router View Scoped Slot • Router View ʹ default scoped

    slot ͕௥Ճ • Slot ͷதͰ v-if/v-else ͢Ε͹ɺNOT FOUND ϖʔδʹԠ༻Ͱ͖Δ σϑΥϧτɾϏϡʔ
  10. Router View Route Prop • Router View ʹ `route` prop

    ͕௥Ճ • Router View ʹදࣔ͢Δ route Λ໌ࣔతʹࢦఆͰ͖ΔΑ͏ʹ • ผͷϖʔδΛදࣔͨ͠·· URL ΛϞʔμϧ༻ʹมߋͰ͖Δ • Ϟʔμϧදࣔঢ়ଶΛωΠςΟϒʹώετϦʔʹ࢒ͤΔ ϋοΫ͠ͳͯ͘Α͘ͳΓ·ͨ͠
  11. ඦฉ͸Ұݟʹ೗͔ͣ ʢDEMOʣ

  12. And More! ਖ਼௚ɺ10෼͡Όແཧ • ಈతͳ route ͷߋ৽͕Մೳʹ (`addRoute()`, `removeRoute()`) •

    ΑΓ promise-based ͳ navigation ʹ • Navigation guard ͷ `next()` ͕ഇࢭ • Navigation failure ͷछྨ͕ΑΓ໌֬ʹ • Router View ͱ Keep Alive / Transition ͱͷซ༻ํ๏͕มߋ • `scrollBehavior()` ؔ਺͕ΑΓωΠςΟϒ API ʹۙ͘ɺศརʹ
  13. References ࢀߟࢿྉ • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0036-router-view-route-prop.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0022-router-merge-meta-routelocation.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md

    • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0029-router-dynamic-routing.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0033-router-navigation-failures.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0034-router-view-keep-alive-transitions.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0035-router-scroll-position.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0036-router-view-route-prop.md • https://github.com/vuejs/rfcs/blob/master/active-rfcs/0037-router-return-guards.md
  14. Thank You