Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly
LINE Developers
PRO
September 18, 2020
Technology
2
4.1k
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/
LINE Developers
PRO
September 18, 2020
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
SONiCをLINEのClosネットワークに導入した話 / A story to adopt SONiC in LINE’s Clos Network
line_developers
PRO
1
70
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
220
LINE iOSエンジニアの日々 / LINE iOS Engineer Days
line_developers
PRO
1
140
“Do you have a virtual router?” Discuss how to use virtual routers
line_developers
PRO
0
550
LINEにおけるネットワーク自動化チーム / Network Automation Team in LINE
line_developers
PRO
0
290
ひとりで書ける! 日英文章作成のコツ / Do-it-yourself! - Tips for writing in Japanese-English
line_developers
PRO
1
420
UIT Survey 2022
line_developers
PRO
0
120
LINE’s Journey; Road to 4 Million Cores in the Private Cloud
line_developers
PRO
0
78
Investigating Kafka performance issue caused by lock contention in xfs
line_developers
PRO
0
240
Other Decks in Technology
See All in Technology
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
480
USB PD で迎える AC アダプター大統一時代
puhitaku
2
1.9k
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1k
02_プロトタイピングの進め方
kouzoukaikaku
0
180
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
150
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
320
Cloudflare Workersで動くOG画像生成器
aiji42
1
480
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
230
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
110
Exploring MapStore Release 2022.02: improved 3DTiles support and more
simboss
PRO
0
310
Pentesting Password Reset Functionality
anugrahsr
0
410
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
160
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
400
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Done Done
chrislema
178
14k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Scaling GitHub
holman
453
140k
Adopting Sorbet at Scale
ufuk
65
7.8k
Fireside Chat
paigeccino
16
1.8k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Atom: Resistance is Futile
akmur
256
24k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
The Language of Interfaces
destraynor
149
21k
Transcript
Nozomu Ikuta 2020/09/18 Vue Router Next ҙ֎ͱޠΒΕͳ͍ Vue 3 ࣌ͷϧʔςΟϯά
Who I am ඵͰΘ͔Δϫλγ • ੜా / Nozomu Ikuta •
Verdaࣨ UI Engineering νʔϜ / UIT Dev 2 νʔϜ • Twitter: @NozomuIkuta
Why Talk about Vue Router ࣮େܕΞοϓσʔτ • Vue 3
ͪΖΜΈͳ͞Μڵຯʑ • Vuex 4 state ͷ Type Support Ͱ TypeScripter ͕ت • Vue Router 4 Έͳ͞Μڵຯͳ͠…? • ࣮ Vue 3 / Vuex 4 ฒΈʹັྗతͳΞοϓσʔτ͕͋Δ͜ͱΛ͍͑ͨ • ʮVue ࡾດʯ͔ͩΒͦ͜
Router Factory `new` ͡Όͳ͍ͷ͕৽͍͠ • Vue 3 Vuex 4
ʹͳΒ͍ `new VueRouter()` Ͱͳ͘ `createRouter()` ʹมߋ • `history ` ΦϓγϣϯؔΛ͢Α͏ʹͳͬͯ tree-shakable ʹ
Route Composition Function จࣈ௨ΓʮϧʔτΛ͏ʯ • `setup()` ؔͰ `this.$route` ͕༻ෆՄ •
ΘΓʹ `useRoute()` ίϯϙδγϣϯؔΛͬͯ࿈ܞ
Route Meta Merge ͏୳͞ͳ͍͍ͯ͘ • ࢠϧʔτͷ `meta` ͷ `meta` ͱ
shallow merge ͞ΕΔΑ͏ʹมߋ • route ͷ access control ϑϥάΛࢠ route ͰࢀরͰ͖Δʂ
Router Link Scoped Slot Ϣʔɾϋϒɾίϯτϩʔϧ • Default slot Ҿ͖ଓ͖݈ࡏ •
`tag` prop ͱ `event` prop ഇࢭ • `custom` prop + scoped slot ͰϑϧΧελϜʂ • Default scoped slot Ͱ `slotProps` Λड͚औͬͯ custom component શ੍ޚʂ
Router Link Active ࢥͬͨ௨ΓʹΞΫςΟϒʹ • active ͔Ͳ͏͔ͷఆج४͕ΑΓ؍తʹʂʢৄࡉׂѪ ʣ • `exact`
prop ഇࢭ • ΤΠϦΞε active ͷఆରʹ • URL ΫΤϦ active ఆͷର֎ʹʢηϧϑαʔϏεʹมߋʣ
Router View Scoped Slot • Router View ʹ default scoped
slot ͕Ճ • Slot ͷதͰ v-if/v-else ͢ΕɺNOT FOUND ϖʔδʹԠ༻Ͱ͖Δ σϑΥϧτɾϏϡʔ
Router View Route Prop • Router View ʹ `route` prop
͕Ճ • Router View ʹදࣔ͢Δ route Λ໌ࣔతʹࢦఆͰ͖ΔΑ͏ʹ • ผͷϖʔδΛදࣔͨ͠·· URL ΛϞʔμϧ༻ʹมߋͰ͖Δ • Ϟʔμϧදࣔঢ়ଶΛωΠςΟϒʹώετϦʔʹͤΔ ϋοΫ͠ͳͯ͘Α͘ͳΓ·ͨ͠
ඦฉҰݟʹ͔ͣ ʢDEMOʣ
And More! ਖ਼ɺ10͡Όແཧ • ಈతͳ route ͷߋ৽͕Մೳʹ (`addRoute()`, `removeRoute()`) •
ΑΓ promise-based ͳ navigation ʹ • Navigation guard ͷ `next()` ͕ഇࢭ • Navigation failure ͷछྨ͕ΑΓ໌֬ʹ • Router View ͱ Keep Alive / Transition ͱͷซ༻ํ๏͕มߋ • `scrollBehavior()` ͕ؔΑΓωΠςΟϒ API ʹۙ͘ɺศརʹ
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
Thank You