Vue.js中类别的嵌套路由

根据当前选择的类别实现嵌套“n”级路由的适当方法是什么

我想正确访问路由，因此我的URL如下所示：

/categories

/categories/containment/

/categories/服装/夹克/

/categories/institute/jacks/mountains/

/categories/institute/jacks/mountains/you\u获得想法

我有一个这样的分类列表：

const categories = [
  {
    name: 'outfit',
    childs: [
      { name: 'jackets',
        childs: [
          { name: 'mountains' }
        ]
      },
      { name: 'pants', childs: ['many subcategories'] },
      { name: 'boots', childs: ['many subcategories'] }
    ]
  },
  {
    name: 'knives',
    childs: [
      { name: 'hunting' },
      { name: 'souvenirs' },
      { name: 'kitchen' },
      { name: 'skinning' },
      { name: 'throwing' }
    ]
  }
]

我有一个分类主页（顶级）：

{{category.name}

还有一个嵌套页面用于第一级child：

    <h1>{{ category.name }}</h1>
    <q-img :src="category.image"/>
    <p>{{ category.description }}</p>
    <div class="row q-col-gutter-md">
      <div class="col-md-4 col-xs-6" v-for="subcategory in category.childs" :key="subcategory.id">
        <div class="block q-pa-md">
          <router-link :to="'/categories/' + subcategory.id">
            <h4>{{ subcategory.name }}</h4>
          </router-link>
        </div>
      </div>
    </div>

{{category.name}
{{category.description}}

{{subcategory.name}

我该如何重复嵌套child？

Vue router的功能允许定义一个动态参数，通过将您的路由定义为

/categories/：categoryId+

（路由器用于匹配）来捕获多个路径段

当以这种方式定义时，路由为

/categories/figgles/mountains

将有一个

categoryId

参数，其值为

figgle/jacks/mountains

，该参数可以传递到组件中，易于解析和使用

请参见下面的示例：

Vue.config.devtools=false
Vue.config.productionTip=false
常量类别=[{
名称：'装备'，
儿童：[{
姓名：'夹克'，
儿童：[{
名称：“山脉”
}]
},
{
名称：'裤子'，
儿童：[{
姓名：'短'
}, {
名称：“长”
}]
},
{
名称：'靴子'，
儿童：[{
姓名：'赤脚'
}, {
名称：“山脉”
}]
}
]
},
{
名称：'刀'，
儿童：[{
名字：“狩猎”
},
{
名称：‘纪念品’
},
{
名称：“厨房”
},
{
名称：“蒙皮”
},
{
名称：“投掷”
}
]
}
]
常量cat=Vue.component（'categories'{
数据：函数（）{
返回{
类别：类别//在现实生活中，这些数据是共享的，例如使用Vuex
}
},
模板：`
{{cat.name}


`
})
const catView=Vue.component（'category-view'{
数据：函数（）{
返回{
类别：类别//在现实生活中，这些数据是共享的，例如使用Vuex
}
},
道具：['categoryId']，
模板：`

cat.name==此.categoryId[0]）；
对于（i=1；icat.name==this.categoryId[i]）
}
返回子类别
},
parentCategoryPath（）{
返回“/categories/”+this.categoryId.slice（0，-1）.join（“/”）
}
}
})
常量路由器=新的VueRouter({
基：'/js',，
模式：“历史”，
路线：[{
路径：“/”，
重定向：'/categories'，
},
{
路径：'/categories'，
组件：cat，
},
{
路径：'/categories/：categoryId+'，
组件：catView，
道具：路线=>({
categoryId:route.params.categoryId.split（“/”）
})
}
]
})
const vm=新的Vue({
el:“#应用程序”，
路由器，
数据：函数（）{
返回{}
}
})

hr{
边界：无；
边框顶部：3倍双色#333；
颜色：#333；
溢出：可见；
文本对齐：居中；
高度：5px；
}

{{$route.path}

我不确定是否理解您的问题。您是否打算为每一个页面指定一个特定的路由，或者动态路由是您想要的？如果是这样，请看一看：@ThomasBay-我有一组嵌套的类别，其中每个记录都包含一个child节点，如果其他记录将其引用为“parent_id”。为了更好的URL可读性，我想将URL设置为可嵌套的，用户可以在类别树中进行更深入的操作。我已经使用了您的方法，对逻辑进行了粗略的修改，并且效果很好。非常感谢。

    <h1>{{ category.name }}</h1>
    <q-img :src="category.image"/>
    <p>{{ category.description }}</p>
    <div class="row q-col-gutter-md">
      <div class="col-md-4 col-xs-6" v-for="subcategory in category.childs" :key="subcategory.id">
        <div class="block q-pa-md">
          <router-link :to="'/categories/' + subcategory.id">
            <h4>{{ subcategory.name }}</h4>
          </router-link>
        </div>
      </div>
    </div>