vue router

index.js

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  { path: '/', component: home, name: 'home' },
  {
    path: '/about', component: about, name: 'about',
    children: [
      { path: 'end', component: end, name: 'end' }
    ]
  },
]

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

export default router;

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";

createApp(App).use(router).mount('#app')

app.vue

<template>
  <router-view />
</template>

<style scoped>
</style>

home.vue

<script setup>
</script>

<template>
  <router-link to="/about">
	 // 내용
  </router-link>
</template>
<script>
export default {
  name: "home",
  data: () => ({
  }),
};
</script>

about.vue

<template>
  <div
    <button @click="$router.push({ name: 'end' })">about</button>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "about",
  data: () => ({}),
};
</script>

localhost:3000/about/end로 나옴