菜单在VueJS中崩溃

Question

我有一个动态菜单，在这里的另一个问题Stack我能够把课程＃34;活跃＆＃34;当我点击属于他的路线的菜单时。 现在，当Tag＆＃34; a＆＃34;收到课程＆＃34; Active＆＃34;当它被选中时。

好！我的问题是：我的整个菜单都处于折叠模式。如何通过制作＆＃34; ul＆＃34;来启动页面？根据所选路由器打开 ？ 我是否必须进行搜索以找到＆＃34;活跃的＆＃34;上课并从中添加＆＃34;崩溃＆＃34;到我的＆＃34; ul＆＃34;父母??

• 打开＆＃34; ul＆＃34;菜单我必须把课程＆＃34;崩溃在＆＃34;

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

谢谢！

Answer 1

首先，在路由器文件中创建目录路径并删除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中的该元素将折叠您的菜单。