Vue.js . में श्रेणियों का नेस्टेड मार्ग

Vue.config.devtools = false
Vue.config.productionTip = false

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

const cat = Vue.component('categories', {
  data: function() {
    return {
      categories: categories // in real life, this data is shared for example using Vuex
    }
  },
  template: `
    <div>
      <template v-for="cat in categories">
        <router-link :to="'/categories/'+cat.name" :key="cat.name"> {{ cat.name }} </router-link>
        </br>
      </template>
    </div>
  `
})

const catView = Vue.component('category-view', {
  data: function() {
    return {
      categories: categories // in real life, this data is shared for example using Vuex
    }
  },
  props: ['categoryId'],
  template: `
    <div>
      <hr>
      <router-link :to="parentCategoryPath"> <- Back </router-link>      
      <div>Params: {{ categoryId }}</div>
      <hr>
      <template v-if="categoryDefinition && categoryDefinition.childs">
        <template v-for="cat in categoryDefinition.childs">
          <router-link :to="$route.path+ '/' +cat.name" :key="cat.name"> {{ cat.name }} </router-link>
          </br>
        </template>
      </template>
    </div>  
  `,
  computed: {
    categoryDefinition() {
      let subCategory = this.categories.find(cat => cat.name === this.categoryId[0]);

      for (i = 1; i < this.categoryId.length; i++) {
        subCategory = subCategory.childs.find(cat => cat.name === this.categoryId[i])
      }
      return subCategory
    },
    parentCategoryPath() {
      return '/categories/' + this.categoryId.slice(0, -1).join('/')
    }
  }
})

const router = new VueRouter({
  base: '/js',
  mode: 'history',
  routes: [{
      path: '/',
      redirect: '/categories',
    },
    {
      path: '/categories',
      component: cat,
    },
    {
      path: '/categories/:categoryId+',
      component: catView,
      props: route => ({
        categoryId: route.params.categoryId.split('/')
      })
    }
  ]
})

const vm = new Vue({
  el: '#app',
  router,
  data: function() {
    return {}
  }
})

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.1/vue-router.min.js" integrity="sha512-c5QVsHf336TmWncPySsNK2ncFiVsPEWOiJGDH/Le/5U6q1hU6F5B7ziAgRwCokxjmu4HZBkfWsQg/D/+X3hFww==" crossorigin="anonymous"></script>

<div id="app">
  {{ $route.path }}
  <router-view></router-view>
</div>