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/

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