[英]Vue Router Setup work when visited directly via URL
I'm looking for advice on how to go about this routing scenario: 我正在寻找有关如何解决此路由方案的建议:
I have the following HTML that loops category and items in the category. 我有以下HTML,它可以循环类别和类别中的项目。 The
<router-view>
is inside the category so that when an item is clicked it will open only in the category that related to that item. <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>
My routes are as follows: 我的路线如下:
{
path: '/businesses',
name: 'Directory',
component: Directory,
children: [{
path: ':listing',
name: 'Listing',
component: Listing
}]
}
Visualization: 可视化:
How do I get the data of the item clicked to pass to the router-view
? 我如何获取单击以传递到
router-view
的项目的数据? I assume I'd use props but that wouldn't work if the user visited details directly by URL? 我假设我会使用道具,但是如果用户直接通过URL访问详细信息,那将不起作用?
I tried getting the item like so: 我试图像这样获得项目:
methods: {
finalItem ($route) {
var match = this.businesses.filter((business) => {
return business.link === $route.params.listing
})
return match[0]
}
}
This doesn't work, even if it did, this feels wrong. 即使这样,也行不通,这感觉很不对劲。 Is there a way to pass the data in a way that would preserve even when visited directly?
有没有一种即使直接访问也可以保留数据的方式传递数据? This is my primary concern.
这是我最关心的。 (I understand the repeated
<router-view>
is bad code but am not sure how to get around doing that with my layout. Open to suggestions on that too though.) (我知道重复的
<router-view>
是错误的代码,但是不确定如何在我的布局中解决这个问题。不过,对此也有很多建议。)
The way you're using router-view
, you might as well just drop a component in. As far as using multiple router-view
s goes, it's very common, so idk what @varbrad is talking about there. 您使用
router-view
的方式可能也只需放入一个组件。就使用多个router-view
而言,这是很常见的,所以idk @varbrad在这里谈论的是什么。 Child routes are fine. 子路线很好。
The not-so-common part is using multiple router-view
's in one component. 不太常见的部分是在一个组件中使用多个
router-view
。 The UI you're aiming for is nearly identical to Netflix. 您想要的UI与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.
如果您查看他们在做什么,您会看到他们在路线查询中传递的电影ID(公司ID /简称)为“ jbv”,行号(类别名称)为“ jbr”。
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. 我不确定
filteredByCat
是什么样子,但是设置方式将为每个类别列出相同的业务。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.