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>

通过URL直接访问Vue路由器设置工作

1 个答案: