๋ทฐ ๋ผ์šฐํ„ฐ

๋ทฐ ๋ผ์šฐํ„ฐ๋Š” ๋ทฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๋ทฐ ๋ผ์šฐํ„ฐ ์„ค์น˜

ํ”„๋กœ์ ํŠธ์— ๋ทฐ ๋ผ์šฐํ„ฐ๋ฅผ ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ CDN ๋ฐฉ์‹๊ณผ NPM ๋ฐฉ์‹ 2๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

CDN ๋ฐฉ์‹

<script src="https://unpkg.com/vue-router/dist/vue-router.js">

NPM ๋ฐฉ์‹

npm install vue-router

๋ทฐ ๋ผ์šฐํ„ฐ ๋“ฑ๋ก

๋ทฐ ๋ผ์šฐํ„ฐ๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๋‚˜๋ฉด ์•„๋ž˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด ๋ผ์šฐํ„ฐ ์ธ์Šคํ„ด์Šค๋ฅผ ํ•˜๋‚˜ ์ƒ์„ฑํ•˜๊ณ  ๋ทฐ ์ธ์Šคํ„ด์Šค์— ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.

// ๋ผ์šฐํ„ฐ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ
var router = new VueRouter({
  // ๋ผ์šฐํ„ฐ ์˜ต์…˜
})

// ์ธ์Šคํ„ด์Šค์— ๋ผ์šฐํ„ฐ ์ธ์Šคํ„ด์Šค๋ฅผ ๋“ฑ๋ก
new Vue({
  router: router
})

๋ทฐ ๋ผ์šฐํ„ฐ ์˜ต์…˜

์œ„์™€ ๊ฐ™์ด ๋ผ์šฐํ„ฐ๋ฅผ ๋“ฑ๋กํ•˜๊ณ  ๋‚˜๋ฉด ๊ทธ ๋‹ค์Œ์— ํ•  ์ผ์€ ๋ผ์šฐํ„ฐ์— ์˜ต์…˜์„ ์ •์˜ํ•˜๋Š” ์ผ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ SPA ์•ฑ์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด 2๊ฐœ ์˜ต์…˜์„ ํ•„์ˆ˜๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

  • routes : ๋ผ์šฐํŒ… ํ•  URL๊ณผ ์ปดํฌ๋„ŒํŠธ ๊ฐ’ ์ง€์ •
  • mode : URL์˜ ํ•ด์‰ฌ ๊ฐ’ ์ œ๊ฑฐ ์†์„ฑ

๊ทธ๋Ÿผ ์œ„ ์˜ต์…˜์œผ๋กœ ๋ผ์šฐํ„ฐ๋ฅผ ์ •์˜ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

new VueRouter({
  mode: 'history',
  routes: [
    { path: '/login', component: LoginComponent },
    { path: '/home', component: HomeComponent }
  ]
})

์œ„ ์ฝ”๋“œ๋Š” ๋ผ์šฐํŒ…์„ ํ•  ๋•Œ URL์— # ๊ฐ’์„ ์ œ๊ฑฐํ•˜๊ณ , URL ๊ฐ’์ด /login๊ณผ /home์ผ ๋•Œ ๊ฐ๊ฐ ๋กœ๊ทธ์ธ ์ปดํฌ๋„ŒํŠธ์™€ ํ™ˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฟŒ๋ ค์ค๋‹ˆ๋‹ค.

router-view

๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์†Œ ์ฐฝ์—์„œ URL์ด ๋ณ€๊ฒฝ๋˜๋ฉด, ์•ž์—์„œ ์ •์˜ํ•œ routes ์†์„ฑ์— ๋”ฐ๋ผ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๋ฟŒ๋ ค์ง‘๋‹ˆ๋‹ค. ์ด ๋•Œ ๋ฟŒ๋ ค์ง€๋Š” ์ง€์ ์ด ํ…œํ”Œ๋ฆฟ์˜ <router-view>์ž…๋‹ˆ๋‹ค.

<div id="app">
  <router-view></router-view> <!-- LoginComponent ๋˜๋Š” HomeComponent -->
</div>

์•ž์—์„œ ์ •์˜ํ•œ ๋ผ์šฐํŒ… ์˜ต์…˜ ๊ธฐ์ค€์œผ๋กœ /login์€ ๋กœ๊ทธ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ /home์€ ํ™ˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ์›น ํŽ˜์ด์ง€์—์„œ ํŽ˜์ด์ง€ ์ด๋™์„ ํ•  ๋•Œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ url์„ ๋‹ค ์ณ์„œ ์ด๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋•Œ ํ™”๋ฉด์—์„œ ํŠน์ • ๋งํฌ๋ฅผ ํด๋ฆญํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜์•ผ ํ•˜๋Š”๋ฐ ๊ทธ๊ฒŒ ๋ฐ”๋กœ <router-link> ์ž…๋‹ˆ๋‹ค.

<router-link to="์ด๋™ํ•  URL"></router-link>

์‹ค์ œ ์ฝ”๋“œ ์˜ˆ์‹œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

<div>
  <router-link to="/login"></router-link>
</div>

์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ํ™”๋ฉด์—์„œ๋Š” <a> ํƒœ๊ทธ๋กœ ๋ณ€ํ˜•๋˜์„œ ๋‚˜์˜ต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ <a> ํƒœ๊ทธ๋ฅผ ํด๋ฆญํ•˜๋ฉด /login URL๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

๊ธฐํƒ€ ๋ผ์šฐํ„ฐ ์˜ต์…˜๊ณผ ๊ธฐ๋ฒ•

์œ„์˜ ๋‚ด์šฉ์œผ๋กœ๋„ ๊ฐ„๋‹จํ•œ ๋ผ์šฐํŒ…์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐํƒ€ ๋ผ์šฐํ„ฐ API์™€ ์‹ค๋ฌด์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ผ์šฐํ„ฐ ์˜ต์…˜๋“ค์€ ๋’ค์˜ ๋ผ์šฐํ„ฐ ๊ณ ๊ธ‰ ๊ธฐ๋ฒ•์—์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.