라우트 작성 시 name 옵션을 통해 경로 이름을 지정할 수 있다.

1. 경로 이름 정의

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

선언적 방식

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

프로그래밍 방식

router.push({ name: 'user', params: { username: 'erina' } })

2. 뷰 이름 정의

• <router-view> 태그의 name 속성에 뷰이름을 작성하여 정의할 수 있다.
  작성하지 않는 경우 name이 default인 컴포넌트와 매칭된다.

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import LeftSidebar from './views/LeftSidebar.vue'
import RightSidebar from './views/RightSidebar.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home, //명명하지 않은 router-view
        //  LeftSidebar: LeftSidebar 의 줄임
        LeftSidebar,
        RightSidebar,
      },
    },
  ],
})

3. 중첩된 뷰 이름 지정

/settings/emails
/settings/profile

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>

import { createRouter, createWebHistory } from 'vue-router'
import UserSettings from './views/UserSettings.vue'
import UserEmailsSubscriptions from './views/UserEmailsSubscriptions.vue'
import UserProfile from './views/UserProfile.vue'
import UserProfilePreview from './views/UserProfilePreview.vue'

{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

위와 같이 작성하면 /settings/profile 경로에서만 helper 컴포넌트가 지정되어 있기 때문에
<router-view name="helper"/>로 명명된 라우터 뷰 태그는 /settings/profile 경로에서만 표시된다.

실행 예제) https://codesandbox.io/s/nested-named-views-vue-router-4-examples-re9yl?initialpath=/settings/emails&file=/src/router.js:0-299

참고 - Vue Router 공식 문서
https://next.router.vuejs.org/guide/