完成嵌套路由功能的实现,如上图所示,点击商品详情会出现多个商品的链接,点击商品的链接会出现对应的商品详情信息(结合v-for指令实现任意数量商品的渲染,以100个为测试案例)。

好的，实现嵌套路由功能需要以下几个步骤：

1. 在路由配置文件中定义父子路由关系：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import ProductList from '@/views/ProductList.vue'
import ProductDetail from '@/views/ProductDetail.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/products',
      name: 'products',
      component: ProductList,
      children: [
        {
          path: ':id',
          name: 'product-detail',
          component: ProductDetail
        }
      ]
    }
  ]
})

在上面的代码中，我们定义了两个路由，一个是根路由 `/`，一个是父子路由 `/products` 和 `/products/:id`。父子路由中的 `:id` 表示动态参数，可以匹配任意数字、字母或者其他字符。

2. 在 `ProductList` 组件中使用 `v-for` 渲染多个商品链接：

<template>
  <div>
    <h1>Product List</h1>
    <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>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
        { id: 3, name: 'Product 3' },
        // ...
        { id: 100, name: 'Product 100' }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用 `v-for` 渲染了一个包含 100 个商品链接的列表。每个链接都使用 `router-link` 组件，`to` 属性动态绑定了当前商品的 id，这样就可以根据不同的 id 显示不同的商品详情。

3. 在 `ProductDetail` 组件中根据动态参数 id 显示对应的商品详情：

<template>
  <div>
    <h1>Product Detail</h1>
    <p>Product ID: {{ $route.params.id }}</p>
  </div>
</template>

在上面的代码中，我们使用 `$route.params.id` 获取动态参数 id，这样就可以根据不同的 id 显示对应的商品详情。

到这里，嵌套路由功能就实现了，点击商品链接会跳转到对应的商品详情页面。同时，这个功能可以支持任意数量的商品，不需要修改代码。