vue-router动态路由匹配

Question

场景：点击列表视图中的编辑后，跳转到编辑页面，默认显示的是编辑商品视图（AddProduct.vue），点击编辑标签后，显示编辑标签视图（EditTags.vue），我希望的路由是：编辑商品/product/edit/433；编辑标签/product/edit-tags/433

列表视图

编辑商品视图

编辑标签视图

路由设置
{
  path: 'edit/:productId',
  component: resolve => require(['../modules/product/pages/Edit.vue'], resolve),
  children: [
    {
      path: '',  //这里该如何设置
      component: resolve => require(['../modules/product/pages/AddProduct.vue'], resolve)
    }, {
      path: '',  //这里该如何设置
      component: resolve => require(['../modules/product/pages/EditTags.vue'], resolve)
    }
  ]
}
 
Edit.vue文件
<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" unique-opened router>
      <el-menu-item :index="editIndex">编辑商品</el-menu-item>
      <el-menu-item :index="tagIndex">编辑标签</el-menu-item>
    </el-menu>
    <div>
      <transition name="move" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
   </div>
</template>

<script>
  export default {
    data () {
      return {
        productId: this.$route.params.productId
      }
    },
    computed: {
      editIndex () {
        return '' //这里该如何设置
      },
      tagIndex () {
        return '' //这里该如何设置
      }
    }
  }
</script>

Q1:请问代码中的注释处该如何设置？
Q2:除了下面这种方式，请问如何让path: 'edit/:productId' 和 path: 'edit' 匹配到同一个component？

[{
  path: 'edit/:productId',
  component: resolve => require(['A.vue'], resolve),
}, {
  path: 'edit',
  component: resolve => require(['A.vue'], resolve),
}]

Answer 1

建议路由这样设计，更加合理些：

商品列表 /product/
某个商品信息页 /product/:id/
编辑商品信息页 /product/:id/edit
编辑商品标签页 /product/:id/edit-tags