routing

(참고) nested routes는 아래를 참고했다.
https://router.vuejs.org/guide/essentials/nested-routes.html

router > index.js

import {createRouter, createWebHistory} from 'vue-router'
import Home from '../views/Home'
import Cats from '../views/Cats'
import User from '../views/User'
import userPosts from "@/views/UserPosts";

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/cats/:name',
        name: 'Cats',
        component: Cats
    },
    {
        path: '/user/:id',
        component: User,
        children: [
            {
                path: 'posts',
                component: userPosts
            }
        ]
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

App.vue

<template>
  <div class="row">
    <div class="col-12">
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/cats/catname1">catname1</router-link> |
        <!--        <router-link: to="{ name: 'Home' }">Home</router-link> -->
        <router-link to="/user/1">user1</router-link> |
        <router-link to="/user/1/posts">user1 posts</router-link> |
      </div>
    </div>

    <div class="col-12 bg-light">
      <router-view />
    </div>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

views > Home.vue

<template>
  <p>Home.vue</p>
  <button @click="$router.back()" >&lt; Back</button>
</template>
<script>
export default {
  name: 'HomeVue'
}
</script>

views > Cats.vue

<template>
  <p>Cats.vue</p>
  <p>{{$route.params.name}}</p>
  <button @click="$router.back()" >&lt; Back</button>
</template>
<script>
export default {
  name: 'CatsVue'
}
</script>

views > User.vue

<template>
  <div>
    <p>User.vue</p>
    User {{ $route.params.id }}
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'UserVue'
}
</script>

views > UserPosts.vue

<template>
  <div>
    <p>UserPosts.vue</p>
  </div>
</template>

<script>
export default {
  name: 'UserPostsVue'
}
</script>