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

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

---

# ✅ 1. **基本的なルーティング**
### 📌 オブジェクトリテラル形式（一般的な書き方）
```ts
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` などのパラメータを使う
```ts
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` を取得
```vue
<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>
```

---

# ✅ 3. **ネストされたルーティング（子ルート）**
ルートの中に **子ルート** を作ることもできます。  

### 📌 ルーティング設定
```ts
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 />` を使う
```vue
<template>
  <div>
    <h1>User Page</h1>
    <router-view />
  </div>
</template>
```

---

# ✅ 4. **リダイレクトとエイリアス**
### 📌 **リダイレクト（`redirect`）**
ある URL へのアクセスを別の URL にリダイレクトする。  
```ts
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/home",
      redirect: "/",
    },
    {
      path: "/old-route",
      redirect: { name: "NewPage" },
    },
  ],
});
```
📌 **ポイント**  
- `/home` にアクセスすると `/` にリダイレクト  
- `/old-route` にアクセスすると `NewPage` にリダイレクト  

---

### 📌 **エイリアス（`alias`）**
URL を変えずに **見かけ上のパス** を増やす。  
```ts
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/real-path",
      component: () => import("@/views/RealComponent.vue"),
      alias: "/alias-path",
    },
  ],
});
```
📌 **ポイント**  
- `/real-path` も `/alias-path` も同じページを表示  

---

# ✅ 5. **ナビゲーションガード（ルートガード）**
特定のページにアクセスする前に、認証チェックなどを行うことができる。

### 📌 **グローバルガード（全ページに適用）**
```ts
router.beforeEach((to, from, next) => {
  if (to.path === "/admin" && !isLoggedIn()) {
    next("/login"); // 未ログインならログインページへリダイレクト
  } else {
    next(); // そのままページを表示
  }
});
```

### 📌 **個別のルートガード**
```ts
{
  path: "/admin",
  component: () => import("@/views/Admin.vue"),
  beforeEnter: (to, from, next) => {
    if (!isAdminUser()) {
      next("/"); // 管理者でなければトップページへリダイレクト
    } else {
      next();
    }
  },
}
```
📌 **ポイント**  
- `beforeEnter` を使って、特定のページだけアクセス制限をかける  

---

# ✅ 6. **プログラムでルートを変更**
### 📌 **ページ遷移**
```ts
this.$router.push("/about"); // "/about" に移動
this.$router.push({ name: "User", params: { id: 5 } }); // "/user/5" に移動
```

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

---

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

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


***私用***

viewsに
test.vueを作成したら、
```vue
<script lang="ts">
export default {};
<script/>
```

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