Vue.js Vue Router

// 記事データ
const articles = [
  { id: 1, title: 'Vue 3の新機能', category: 'vue', content: 'Vue 3では多くの新機能が追加されました...' },
  { id: 2, title: 'Vue Routerの使い方', category: 'vue', content: 'Vue Routerを使うとSPAが簡単に作れます...' },
  { id: 3, title: 'JavaScriptの基本', category: 'javascript', content: 'JavaScriptの基本を学びましょう...' },
  { id: 4, title: 'ES6の新機能', category: 'javascript', content: 'ES6では多くの便利な機能が追加されました...' }
]

// ホームページコンポーネント
const Home = {
  data() {
    return { articles }
  },
  template: `
    <div>
      <h3>最新記事</h3>
      <div class="article-list">
        <div v-for="article in articles" :key="article.id" class="article-card">
          <router-link :to="'/article/' + article.id">
            <div class="article-title">{{ article.title }}</div>
          </router-link>
          <div class="article-meta">
            <span class="category-tag">{{ article.category }}</span>
          </div>
        </div>
      </div>
    </div>
  `
}

// 記事詳細ページコンポーネント
const ArticleDetail = {
  data() {
    return { articles }
  },
  computed: {
    article() {
      const id = parseInt(this.$route.params.id)
      return this.articles.find(a => a.id === id)
    }
  },
  template: `
    <div v-if="article">
      <h3>{{ article.title }}</h3>
      <div class="article-meta">
        <span class="category-tag">{{ article.category }}</span>
      </div>
      <p>{{ article.content }}</p>
      <router-link to="/">← ホームに戻る</router-link>
    </div>
    <div v-else>
      <h3>記事が見つかりません</h3>
      <router-link to="/">ホームに戻る</router-link>
    </div>
  `
}

// カテゴリーページコンポーネント
const CategoryPage = {
  data() {
    return { articles }
  },
  computed: {
    categoryArticles() {
      const category = this.$route.params.category
      return this.articles.filter(a => a.category === category)
    }
  },
  template: `
    <div>
      <h3>{{ $route.params.category }}の記事</h3>
      <div class="article-list">
        <div v-for="article in categoryArticles" :key="article.id" class="article-card">
          <router-link :to="'/article/' + article.id">
            <div class="article-title">{{ article.title }}</div>
          </router-link>
          <div class="article-meta">
            <span class="category-tag">{{ article.category }}</span>
          </div>
        </div>
      </div>
    </div>
  `
}

// ルート定義
const routes = [
  { path: '/', component: Home },
  { path: '/article/:id', component: ArticleDetail },
  { path: '/category/:category', component: CategoryPage }
]

// Vue Routerの作成
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

// アプリケーションの作成
const app = Vue.createApp({})

// ルーターをアプリケーションに追加
app.use(router)

// マウント
app.mount('#app')