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
560
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
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
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
24
17k
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
180
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
920
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
0
220
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
340
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
210
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
The Invisible Side of Design
smashingmag
301
51k
Code Reviewing Like a Champion
maltzj
525
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Faster Mobile Websites
deanohume
310
31k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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