通過URL直接訪問時，Vue路由器設置工作

Question

我正在尋找有關如何解決此路由方案的建議：

我有以下HTML，它可以循環類別和類別中的項目。 <router-view>在類別內，因此單擊某個項目時，它將僅在與該項目相關的類別中打開。

<ul>
    <li v-for="cat in categories">
        <ul>
            <li v-for="business in filteredByCat">{{business.name}}</li>
        </ul>
        <router-view v-if="..."></router-view>
    </li>
</ul>

我的路線如下：

{
      path: '/businesses',
      name: 'Directory',
      component: Directory,
      children: [{
        path: ':listing',
        name: 'Listing',
        component: Listing
      }]
    }

可視化：

我如何獲取單擊以傳遞到router-view的項目的數據？ 我假設我會使用道具，但是如果用戶直接通過URL訪問詳細信息，那將不起作用？

我試圖像這樣獲得項目：

methods: {
    finalItem ($route) {
      var match = this.businesses.filter((business) => {
        return business.link === $route.params.listing
      })
      return match[0]
    }
  }

即使這樣，也行不通，這感覺很不對勁。 有沒有一種即使直接訪問也可以保留數據的方式傳遞數據？ 這是我最關心的。 （我知道重復的<router-view>是錯誤的代碼，但是不確定如何在我的布局中解決這個問題。不過，對此也有很多建議。）

Answer 1

您使用router-view的方式可能也只需放入一個組件。就使用多個router-view而言，這是很常見的，所以idk @varbrad在這里談論的是什么。 子路線很好。

不太常見的部分是在一個組件中使用多個router-view 。 您想要的UI與Netflix幾乎相同。 如果您查看他們在做什么，您會看到他們在路線查詢中傳遞的電影ID（公司ID /簡稱）為“ jbv”，行號（類別名稱）為“ jbr”。

讓我們在您的組件中模擬一下：

我不確定filteredByCat是什么樣子，但是設置方式將為每個類別列出相同的業務。 嘗試這樣的事情：

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>