vueのルーティングについて

Vue のルーティングには、いくつかの書き方や設定方法があります。
主に Vue Router を使ったルーティングの設定方法を紹介します。

---

✅ 1. 基本的なルーティング

📌 オブジェクトリテラル形式（一般的な書き方）

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

Vue.use(Router);

export default new Router({
  mode: "history", // または "hash"
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/about",
      name: "About",
      component: About,
    },
  ],
});

📌 ポイント

• mode: "history" を使うと、URL が /about のようにきれいになる（サーバー設定が必要な場合あり）
• mode: "hash" を使うと、URL に # が付き /#/about になる

---

✅ 2. 動的ルーティング（パラメータ付き）

動的な URL を設定することもできます。

📌 :id などのパラメータを使う

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/user/:id",
      name: "User",
      component: () => import("@/views/User.vue"), // 遅延ロード
    },
  ],
});

📌 ポイント

• :id の部分が変化し、/user/1 や /user/123 のような URL でアクセスできる
• this.$route.params.id で id の値を取得できる

📌 User.vue 内で id を取得

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

---

✅ 3. ネストされたルーティング（子ルート）

ルートの中に 子ルート を作ることもできます。

📌 ルーティング設定

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/user/:id",
      component: () => import("@/views/User.vue"),
      children: [
        {
          path: "profile",
          component: () => import("@/views/Profile.vue"),
        },
        {
          path: "settings",
          component: () => import("@/views/Settings.vue"),
        },
      ],
    },
  ],
});

📌 ポイント

• /user/1/profile で Profile.vue を表示
• /user/1/settings で Settings.vue を表示
• 親コンポーネント（User.vue）の中で <router-view /> を使う

📌 User.vue 内で <router-view /> を使う

<template>
  <div>
    <h1>User Page</h1>
    <router-view />
  </div>
</template>

---

✅ 4. リダイレクトとエイリアス

📌 リダイレクト（redirect）

ある URL へのアクセスを別の URL にリダイレクトする。

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/home",
      redirect: "/",
    },
    {
      path: "/old-route",
      redirect: { name: "NewPage" },
    },
  ],
});

📌 ポイント

• /home にアクセスすると / にリダイレクト
• /old-route にアクセスすると NewPage にリダイレクト

---

📌 エイリアス（alias）

URL を変えずに 見かけ上のパス を増やす。

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/real-path",
      component: () => import("@/views/RealComponent.vue"),
      alias: "/alias-path",
    },
  ],
});

📌 ポイント

• /real-path も /alias-path も同じページを表示

---

✅ 5. ナビゲーションガード（ルートガード）

特定のページにアクセスする前に、認証チェックなどを行うことができる。

📌 グローバルガード（全ページに適用）

router.beforeEach((to, from, next) => {
  if (to.path === "/admin" && !isLoggedIn()) {
    next("/login"); // 未ログインならログインページへリダイレクト
  } else {
    next(); // そのままページを表示
  }
});

📌 個別のルートガード

{
  path: "/admin",
  component: () => import("@/views/Admin.vue"),
  beforeEnter: (to, from, next) => {
    if (!isAdminUser()) {
      next("/"); // 管理者でなければトップページへリダイレクト
    } else {
      next();
    }
  },
}

📌 ポイント

• beforeEnter を使って、特定のページだけアクセス制限をかける

---

✅ 6. プログラムでルートを変更

📌 ページ遷移

this.$router.push("/about"); // "/about" に移動
this.$router.push({ name: "User", params: { id: 5 } }); // "/user/5" に移動

📌 前のページに戻る

this.$router.go(-1); // 1つ前のページに戻る

---

✅ まとめ

方法	説明
基本ルーティング	routes: [{ path: "/", component: Home }]
動的ルーティング	/user/:id のようにパラメータ付き
ネストルート	/user/1/profile などの子ルート
リダイレクト	あるルートから別ルートへ転送
エイリアス	URL を増やす（alias）
ルートガード	認証チェックなどを実装
プログラム遷移	$router.push() で動的にページ遷移

Vue Router にはいろんな書き方があるので、プロジェクトに応じて使い分けてみてください！😃🚀

私用

viewsに
test.vueを作成したら、

<script lang="ts">
export default {};
<script/>

export default を書かないと、routerと紐づかないよ！