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

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