वर्तमान में चयनित श्रेणी के आधार पर मार्गों के नेस्टेड "एन" स्तरों को प्राप्त करने का उचित तरीका क्या है?

मैं मार्गों को ठीक से एक्सेस करना चाहता हूं, इसलिए मेरा यूआरएल इस तरह दिखेगा:

  1. /categories
  2. /categories/outfit/
  3. /categories/outfit/jackets/
  4. /categories/outfit/jackets/mountains/
  5. /categories/outfit/jackets/mountains/you_get_the_idea

मेरे पास इस तरह की श्रेणियों की एक सूची है:

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' }
    ]
  }
]

मेरे पास श्रेणियों का मुख्य पृष्ठ है (शीर्ष स्तर):

      <div class="col-6" v-for="category in categories" :key="category.id">
        <div class="block q-pa-md">
          <router-link :to="'/categories/' + category.slug">
            <h4>{{ category.name }}</h4>
          </router-link>
        </div>
      </div>

और पहले स्तर के बच्चों के लिए एक नेस्टेड पृष्ठ है:

    <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>

मैं कुछ दोहराए गए नेस्टेड बच्चों को कैसे करूं?

1
aspirinemaga 11 फरवरी 2021, 02:44
मुझे यकीन नहीं है कि मैं आपका प्रश्न समझता हूं। क्या आप प्रत्येक पृष्ठ के लिए एक विशिष्ट मार्ग का इरादा रखते हैं, या गतिशील मार्ग जो आप ढूंढ रहे हैं? अगर ऐसा है, तो एक नज़र डालें: राउटर। vuejs.org/guide/आवश्यक/…
 – 
Thomas Bay
11 फरवरी 2021, 03:18
- मेरे पास श्रेणियों का एक नेस्टेड सेट है, जहां प्रत्येक रिकॉर्ड में एक चिल्ड नोड्स होता है यदि यह अन्य रिकॉर्ड इसे "parent_id" के रूप में संदर्भित करता है। बेहतर यूआरएल पठनीयता के लिए, मैं यूआरएल को घोंसला बनाने योग्य बनाना चाहता हूं, जहां एक उपयोगकर्ता श्रेणी के पेड़ के अंदर गहराई तक जा सकता है
 – 
aspirinemaga
11 फरवरी 2021, 03:34

1 उत्तर

सबसे बढ़िया उत्तर

Vue राउटर की डायनामिक रूट मैचिंग विशेषता एक डायनेमिक पैरामीटर को परिभाषित करने की अनुमति देती है जो आपके मार्ग को /categories/:categoryId+ के रूप में परिभाषित करके पथ के एक से अधिक खंडों को कैप्चर करता है (राउटर पथ-से-रेगेक्स मिलान करने के लिए)

जब इस तरह परिभाषित किया जाता है, तो /categories/outfit/jackets/mountains के रूप में मार्ग में categoryId मान outfit/jackets/mountains के साथ पैरामीटर होगा, जिसे घटक में पारित किया जा सकता है, आसानी से पार्स किया जा सकता है और इसके साथ काम किया जा सकता है ...

नीचे मेरा उदाहरण देखें:

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>
1
Michal Levý 11 फरवरी 2021, 12:19
मैंने थोड़ा संशोधित तर्क के साथ आपके दृष्टिकोण का उपयोग किया है और यह काम करता है। धन्यवाद !
 – 
aspirinemaga
12 फरवरी 2021, 01:31