Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vu...
Search
LINE Developers
September 18, 2020
Technology
2
5.2k
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
September 18, 2020
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
LINEスタンプのSREing事例集:大きなスパイクアクセスを捌くためのSREing
line_developers
1
2.3k
Java 21 Overview
line_developers
6
1.2k
Code Review Challenge: An example of a solution
line_developers
1
1.3k
KARTEのAPIサーバ化
line_developers
1
540
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.5k
A/B Testing at LINE NEWS
line_developers
3
980
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
ゼロからはじめる採用広報
yutadayo
3
980
PO初心者が考えた ”POらしさ”
nb_rady
0
220
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
180
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
550
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
870
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
3
190
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Producing Creativity
orderedlist
PRO
346
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Code Reviewing Like a Champion
maltzj
524
40k
Side Projects
sachag
455
42k
Building an army of robots
kneath
306
45k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Code Review Best Practice
trishagee
69
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
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