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
TableauLangchainとは何か?
cielo1985
1
120
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
370
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
160
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
120
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8.1k
shake-upを科学する
rsakata
7
790
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
440
ABEMAの本番環境負荷試験への挑戦
mk2taiga
4
310
SREのためのeBPF活用ステップアップガイド
egmc
1
200
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GraphQLとの向き合い方2022年版
quramy
49
14k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Language of Interfaces
destraynor
158
25k
How GitHub (no longer) Works
holman
314
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
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