vue-router的路由嵌套

商品页面——> 不同的商品页面

1.商品页面组件

<template>
    <div>
    <div>我是商品列表页面{{$route.params.id}}</div>
    <router-link to="/product">我要去商品1页面</router-link><br>
    <router-link to="/product/prod2">我要去商品2页面</router-link><br>
    <router-link to="/product/prod3">我要去商品3页面</router-link><br>
    <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'product',
    }
</script>

<style scoped>

</style>

2.index.js

//我的商品路由
    {
      path: '/product',
      name: 'product',
      component: Product,
      children:[//配置子路由
        {
          path: '/',
          name: 'prod1',
          component: Prod1,
        },
        {
          path: 'prod2',
          name: 'prod2',
          component: Prod2,
        },
        {
          path: 'prod3',
          name: 'prod3',
          component: Prod3,
        },
      ]
    },