![](/img/trans.png)
[英]Vuejs : Open a collapse menu when a particular tab is active and close it when it is not active
[英]Menu Collapse in VueJS
我有一个动态菜单,在Stack的另一个问题中,当我单击属于他的路线的菜单时,我能够将其设为“活动”类。 现在,当标签“ a”被选中时,收到类别“活动”。
好! 我的问题是:我的整个菜单处于“折叠”模式。 如何通过根据所选路由器打开“ ul” 来启动页面? 我是否必须进行搜索以查找“活动”班级在哪里,并由此向我的“ ul”父母中添加“崩溃”?
这是我的Menu.vue :
<template>
<li v-for="item in Menu">
<router-link :to="{ name: item.Rota }" tag="a" :class="{ 'active': $route.name === item.Rota }">
{{item.Nome}}
</router-link>
<ul class="nav nav-second-level" v-if="item.SubMenu != null">
<li v-for="SecondItem in item.SubMenu">
<router-link :to="{ name: SecondItem.Rota }" tag="a" :class="{ 'active': $route.name === SecondItem.Rota }">
{{SecondItem.Nome}}
</router-link>
<ul class="nav nav-third-level" v-if="SecondItem.MenuItem != null">
<li v-for="ThirdItem in SecondItem.MenuItem">
<router-link :to="{ name: ThirdItem.Rota }" tag="a" :class="{ 'active': $route.name === ThirdItem.Rota }">
{{ThirdItem.Nome}}
</router-link>
</li>
</ul>
</li>
</ul>
</li>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
Menu: []
}),
created() {
let Data = [{
"Nome": "Produtos",
"MenuItem": [{
"Nome": "Catalogos de Produtos",
"Rota": "Produtos"
}]
},
{
"Nome": "Menu Teste",
"MenuItem": [{
"Nome": "Menu Teste Nível 3",
"MenuItem": [{
"Nome": "Página teste 3",
"Rota": "PagTesteTres"
}]
}]
}
]
this.Menu = Data;
}
}
</script>
谢谢!!
首先,在路由器文件中创建目录路径并摆脱Data
数组。
const menuRoutes = [
{
path: '/',
component: MainPage,
children: [
path: '/subpage',
component: Subpage,
meta: {
title: 'subpage',
},
children: [
{
path: '',
name: 'thirdPage',
component: ShirdPage,
meta: {
title: 'Child of subpage',
},
},
],
},
];
<template>
<li v-for="route in MenuRoutes">
<router-link :to="{ name: item.Rota }" tag="a" :class="{ 'active open': isActiveRoute(route) }">
{{item.Nome}}
</router-link>
<ul class="nav nav-second-level" v-if="item.SubMenu != null">
<li v-for="route in SubMenuRoutes">
<router-link :to="{ name: SecondItem.Rota }" tag="a" :class="{ 'active open': isActiveRoute(route) }">
{{SecondItem.Nome}}
</router-link>
<ul class="nav nav-third-level" v-if="SecondItem.MenuItem != null">
<li v-for="route in SubMenuRoutes.children">
<router-link :to="{ name: ThirdItem.Rota }" tag="a" :class="{ 'active open': isActiveRoute(route) }">
{{ThirdItem.Nome}}
</router-link>
</li>
</ul>
</li>
</ul>
</li>
</template>
<script>
import axios from 'axios'
export default {
computed: {
menuRoutes() {
return this.$router.options.routes;
},
SubMenuRoutes() {
return this.$router.options.routes.children;
}
},
methods: {
isActiveRoute(route) {
const isActive = this.$route.matched.some(matched => matched.path === route.path);
return isActive;
},
},
}
</script>
isActiveRoute()
方法检查路由的任何子级是否为实际路由,因此单击子级后,父菜单将折叠。 它取决于open
类或您要调用的任何东西(例如, collapse open
),因此必须确保将此类添加到DOM中的该元素会合上菜单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.