Javascript VueJS中的菜单折叠

我有一个动态菜单，在这里关于Stack的另一个问题中，当我点击属于他的路线的菜单时，我能够激活这个类。 现在，当标记a在被选中时接收到活动的类时

好!！我的问题是：我的整个菜单处于折叠模式。如何根据所选路由器打开ul来启动页面？ 我是否必须进行搜索以找到活动类的位置，并从该添加到我的ul父母

要打开ul菜单，我必须将类放入 这是我的菜单。vue：

---

谢谢

首先，在路由器文件中创建目录路径，去掉数据数组

路由器.js Vue组件

---

isActiveRoute方法检查路由的任何子级是否为实际路由，以便在单击子级时父菜单将折叠。它取决于open类或您想调用的任何东西，例如collapse open，所以您必须确保将该类添加到DOM中的元素将折叠您的菜单

你能添加一张显示问题的图片吗？还有，为什么课堂上的折叠会打开菜单？通常人们谈论折叠菜单意味着关闭菜单。当然@NathanWailes！给你，对不起，我不懂怎么解释那幅画；你能解释一下哪里出了问题吗？在这种情况下没什么问题，但是如果刷新页面，所有菜单都会关闭。你明白了吗？好的，我想我明白了。图片中显示的所有链接是否都应该具有相同的URL？这似乎不对。这个答案很好！但我必须在ul上开设公开课。我试着做这件事是很活跃的。但它返回给我vm_389;。isActiveRoute是未定义的函数

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

  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>