๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Vue

Nested Router

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 6.
๋ฐ˜์‘ํ˜•

Nested Router(๋„ค์Šคํ‹ฐ๋“œ ๋ผ์šฐํ„ฐ)๋Š” ๋ผ์šฐํ„ฐ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ ์ตœ์†Œ 2๊ฐœ ์ด์ƒ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

๋„ค์Šคํ‹ฐ๋“œ ๋ผ์šฐํ„ฐ๋ฅผ ์ด์šฉํ•˜๋ฉด URL์— ๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ์˜ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œ๋œ๋‹ค.

 

<!DOCTYPE html>
<head>
  <title>Vue Nested Router</title>
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    var User = {
      template: `
        <div>
          User Component
          <router-view></router-view>
        </div>
      `
    }

    var UserProfile = { template: '<p>User Profile Component</p>' }
    var UserPost = { template: '<p>User Post Component</p>' }

    var routes = [
      { 
        path: '/user', 
        component: User, 
        children: [
          {
            path: 'posts',
            component: UserPost
          },
          {
            path: 'profile',
            component: UserProfile
          },
        ]
      }
    ] 

    var router = new VueRouter({
      routes
    })

    var app = new Vue({
      router
    }).$mount('#app')
  </script>
</body>
</html>

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'JavaScript > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vue.js] v-bind  (0) 2022.06.06
Named View  (0) 2022.06.06
[Vue.js] router URL์˜ ํ•ด์‹œ ๊ฐ’(#)์„ ์—†์• ๋Š” ๋ฒ•  (0) 2022.06.06
Vue router  (0) 2022.06.06
๊ฐ™์€ ๋ ˆ๋ฒจ์˜ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹   (0) 2022.06.06

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”