[Vue.js]vue-router-ルーティング名(パス、ビュー)

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' } })

<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,
      },
    },
  ],
})

<!-- 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
    }
  }]
}