出一个简单案例，通过vue实现三级路由的案例，要求提供案例所有组件的代码

好的，下面是一个通过 Vue 实现三级路由的简单案例：

App.vue：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Category from '@/views/Category.vue'
import Product from '@/views/Product.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/category',
      name: 'category',
      component: Category,
      children: [
        {
          path: ':categoryId',
          name: 'product',
          component: Product
        }
      ]
    }
  ]
})

views/Home.vue：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

views/Category.vue：

<template>
  <div>
    <h1>Category</h1>
    <ul>
      <li v-for="category in categories" :key="category.id">
        <router-link :to="{ name: 'product', params: { categoryId: category.id }}">{{ category.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: 'Category 1' },
        { id: 2, name: 'Category 2' },
        { id: 3, name: 'Category 3' }
      ]
    }
  }
}
</script>

views/Product.vue：

<template>
  <div>
    <h1>Product</h1>
    <p>Category ID: {{ $route.params.categoryId }}</p>
    <p>Product ID: {{ $route.params.productId }}</p>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.params.categoryId)
  }
}
</script>

在这个案例中，我们在 `Category` 组件中定义了子路由 `Product`，并使用 `v-for` 渲染出了所有的分类，通过在 `router-link` 中绑定 `to` 属性，我们可以根据当前分类的 ID 动态生成链接，当用户点击链接时，会自动跳转到对应的 `Product` 组件，并将分类 ID 传递给该组件。