通过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？我假设我使用道具，但如果用户直接通过网址访问了详细信息，这将不起作用？

我尝试了这样的项目：

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而言，它的非常< / strong>常见，所以@varbrad在那里谈论的是什么。儿童路线很好。

不太常见的部分是在一个组件中使用多个router-view。您瞄准的用户界面与Netflix几乎完全相同。如果您查看他们正在做什么，您会看到他们将电影ID（商家ID /短名称）传递为＆＃34; jbv＆＃34;和行号（类别名称）为＆＃34; jbr＆＃34;在路线查询中。

让我们在您的组件中模仿：

我不确定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>