Vue Router에서는 중첩 라우팅이 어떻게 구현되나요?

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
import Products from './components/Products.vue'
import ProductDetail from './components/ProductDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  },
  {
    path: '/products',
    component: Products,
    children: [
      {
        path: ':id',
        component: ProductDetail
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

<template>
  <div>
    <h2>Products</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/products/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<template>
  <div>
    <h3>{{ product.name }}</h3>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    // 根据productId从后端获取数据，并将数据赋值给product
    // ...
  }
}
</script>