[Vuejs]-Vue Router Setup work when visited directly via URL

by

0👍

✅

The way you’re using router-view, you might as well just drop a component in. As far as using multiple router-views goes, it’s very common, so idk what @varbrad is talking about there. Child routes are fine.

The not-so-common part is using multiple router-view‘s in one component. The UI you’re aiming for is nearly identical to Netflix. If you check out what they’re doing, you’ll see that they pass a movie ID (business id/shortname) as “jbv” and a row number (category name) as “jbr” in the route query.

Let’s mimic this in your component:

I’m not sure what filteredByCat looks like, but the way you have it set up, it would list the same businesses for every category. Try something like this:

computed:{
  businessesByCategory(){
     let dictionary = {};
     this.businesses.forEach(business=>{
       business.categories.forEach(category=>{ // assuming each business has an array of categories
         dictionary[category] = dictionary[category] || [];
         dictionary[category].push(business)
       })
     })

     return dictionary;
  }
},
data(){
  return {
    activeBusiness:null
  }
},
methods:{
  setActiveBusiness(business){
    this.activeBusiness = business;
  },
  setUrlQuery(listing, category){
    this.$route.query.listing = listing;
    this.$route.query.category = category;
  },
  openListing(business, category){
    this.setActiveBusiness(business);
    this.setUrlQuery(business.link, category);
  }
}

–

<ul>
    <li v-for="cat in categories">
        <ul>
            <li 
              v-for="business in businessesByCategory[cat]"
              @click="openListing(business, cat)"
             >                     
                 {{business.name}}
            </li>
        </ul>
        <Listing :business="activeBusiness" v-if="$route.query.category == cat"></Listing>
    </li>
</ul>

Leave a comment