router

 

router

 

<script src="https://unpkg.com/vue@3.2.30/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>

<div id="root">
  <router-view></router-view>
</div>

<template id="page-top">
  <div>
    <p>Top</p>
    <ul>
      <li>
        <router-link to="/">Top</router-link>
      </li>
      <li>
        <router-link to="/page_a">画面A</router-link>
        <button @click="$router.push('/page_a')">画面A</button>
      </li>
      <li>
        <router-link to="/page_b">画面B</router-link>
        <button @click="$router.push('/page_b')">画面B</button>
      </li>
    </ul>
  </div>
</template>

<template id="page_a">
  <div>
    <h1>Page A</h1>
    <router-link to="/">Top</router-link>
  </div>
</template>

<template id="page_b">
  <div>
    <h1>Page B</h1>
    <router-link to="/">Top</router-link>
  </div>
</template>

const { createApp } = Vue;
const { createRouter, createWebHistory } = VueRouter;

const Home = { template: '#page-top' };

const routes = [
  { path: "/", component: { template: '#page-top' } },
  { path: "/page_a", component: { template: '#page_a' } },
  { path: "/page_b", component: { template: '#page_b' } },
  { path: "/:pathMatch(.*)", redirect: "/" },
];

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

const app = createApp({});
app.use(vueRouter);
app.mount('#root');

.nav-container {
  display: flex;
  justify-content: space-between;
}

.nav {
  flex: 1;
  text-align: center;
}

---