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.3k
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
3
2.3k
Java 21 Overview
line_developers
6
1.2k
Code Review Challenge: An example of a solution
line_developers
1
1.4k
KARTEのAPIサーバ化
line_developers
1
550
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.2k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.6k
A/B Testing at LINE NEWS
line_developers
3
1k
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Technology
See All in Technology
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
340
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.5k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
830
Practical Agentic AI in Software Engineering
uzyn
0
110
いま注目のAIエージェントを作ってみよう
supermarimobros
0
210
人工衛星のファームウェアをRustで書く理由
koba789
15
7.9k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
120
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
180
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.5k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
410
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Faster Mobile Websites
deanohume
309
31k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.4k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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