繁体   English   中英

VueJS中的菜单折叠

[英]Menu Collapse in VueJS

我有一个动态菜单,在Stack的另一个问题中,当我单击属于他的路线的菜单时,我能够将其设为“活动”类。 现在,当标签“ a”被选中时,收到类别“活动”。

好! 我的问题是:我的整个菜单处于“折叠”模式。 如何通过根据所选路由器打开“ ul” 启动页面? 我是否必须进行搜索以查找“活动”班级在哪里,并由此向我的“ ul”父母中添加“崩溃”?

  • 要打开“ ul”菜单,我必须将类“ collapse in”

这是我的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数组。

router.js

  const menuRoutes = [
    {
      path: '/',
      component: MainPage,
      children: [
        path: '/subpage',
        component: Subpage,
        meta: {
          title: 'subpage',
        },
        children: [
          {
            path: '',
            name: 'thirdPage',
            component: ShirdPage,
            meta: {
              title: 'Child of subpage',
            },
          },
      ],
    },
  ];

Vue组件

<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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM