Vue与Iview3实现多级菜单及页面跳转

"本文主要介绍了如何在Vue.js项目中，结合iView 3框架和Vue Router实现多级菜单效果，并实现页面的动态切换。重点在于使用Tree组件和Menu导航菜单来构建多级结构，以及通过监听`on-select-change`事件进行路由跳转。" 在Vue.js开发中，创建多级菜单是常见的需求，特别是在企业级应用中。这里我们使用iView，一个流行的Vue UI组件库，其提供了Tree组件来构建多级结构。首先，确保安装了iView和Vue Router，它们是实现此功能的基础。 1. 配置Tree组件： - iView的Tree组件允许展示层次结构的数据，可以很好地模拟多级菜单。在数据结构中添加一个`url`字段，用于存储每个菜单项对应的路由地址。由于路由的规范性，URL的开头通常需要有斜杠`/`。因此，当从后端获取数据时，需要检查并确保URL的正确性，若缺失斜杠，则需手动添加或让后端进行修正，否则可能导致路由无法正常跳转。 2. 监听`on-select-change`事件： - Tree组件提供了`on-select-change`事件，当用户选择某个节点时会触发。通过这个事件，我们可以获取到当前选中的节点信息，包括它的`url`。然后利用Vue Router的`router.push`方法，将用户重定向到对应路由，实现页面切换。 ```html <template> <div class="layout"> <Layout> <!-- Header部分 --> <Header> <Menu mode="horizontal" theme="dark" active-name="1"> <!-- MenuItem 示例 --> </Menu> </Header> <!-- Layout内容 --> <Layout style="height: 100%; width: 100%;"> <Sider hide-trigger breakpoint="md" width="200" :value="true"> <!-- 使用Tree组件实现多级菜单 --> <Tree :data="data1" @on-select-change="selectChange"></Tree> </Sider> </Layout> </Layout> </div> </template> <script> export default { data() { return { data1: [/* 你的多级菜单数据结构 */], }; }, methods: { selectChange selectedKeys, item { // item 是选中节点的信息，从中获取url const url = item.url; this.$router.push(url); // 路由跳转 }, }, }; </script> ``` 3. 使用Menu组件实现多级菜单： - 对于更复杂的菜单结构，还可以使用iView的Menu组件配合递归组件（如SubMenuItem）来构建多级导航。通过`v-for`循环遍历数据，动态生成菜单项，同时设置相应的路由链接。 ```html <!-- 方法二：使用Menu导航菜单和递归 --> <Menu :default-active="activeIndex" mode="inline"> <SubMenuItem v-for="(item, index) in data1" :key="item.id" :index="item.id"> <!-- 递归渲染子菜单 --> <template #title> <span>{{ item.name }}</span> </template> <!-- 根据需要递归渲染SubMenuItem --> </SubMenuItem> </Menu> ``` 4. 与Vue Router结合： - 在Vue Router的配置中，定义好对应菜单项的路由路径。确保每个菜单项的`url`与路由配置匹配，这样才能实现点击菜单时正确跳转到相应的视图。 通过iView的Tree或Menu组件，结合Vue Router，我们可以轻松实现Vue项目中的多级菜单及页面动态切换。在实际开发中，还需根据具体业务需求调整和优化这些组件的配置。