路由和菜单

Posted 2023-04-27

参考技术A 路由和菜单是组织起一个应用的关键骨架，为了方便管理，使用了中心化的方式，在 router.config.js 统一配置和管理。

在这一部分，脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：

下面简单介绍下各个模块的基本思路

目前脚手架中所有的路由都通过 router.config.js 来统一管理，在 vue-router 的配置中我们增加了一些参数，如 hideChildrenInMenu , meta.title , meta.icon , meta.permission ，来辅助生成菜单。其中：

菜单根据 router.config.js 生成，具体逻辑在 src/store/modules/permission.js 中的 actions.GenerateRoutes 方法实现。

上面对这部分的实现概要进行了介绍，接下来通过实际的案例来说明具体该怎么做。

你可以直接将完整 url 填入 path 中，框架会自动处理。

加好后，会默认生成相关的路由及导航。

在脚手架中我们通过嵌套路由来实现布局模板。 router.config.js 是一个数组，其中第一级数据就是我们的布局，如果你需要新增布局可以再直接增加一个新的一级数据。

路由配置项 E.g:

Route 对象

Meta 路由元信息对象

Vue 路由器使 Bulma 下拉菜单消失

【中文标题】Vue 路由器使 Bulma 下拉菜单消失

【英文标题】：Bulma dropdown disappears with Vue router

【发布时间】：2018-04-11 21:17:18

【问题描述】：

下拉菜单在普通页面上运行良好。

但是当我使用像 SPA 一样工作的 Vue-router 时，除非我快速向下移动光标，否则下拉菜单会在 navbar-item 及其子 navbar-link 之间消失。

路由器页面上的 html 中或路由器视图和导航之间没有间隙或边距。在普通网页上，导航栏项到下拉菜单之间的过渡是无缝的。但是在路由器页面上，一旦光标移出装在外部div内的内部标签，下拉菜单就会消失。

// outer tag
<div class="navbar-item has-dropdown is-hoverable">
    // inner tag
    <a class="navbar-link">More:</a>
</div>

设置 a style="height: 100%" 无法使 a 标签完全适合外部 div

https://bulma.io/documentation/components/navbar/

【问题讨论】：

您的代码中有错字。 is-hoverable 后面有一个冒号，而不是引号。

正确，只是示例代码中的一个错字。意思是按“

好的，你能添加 sn-p 来重现这个错误吗？我认为这不是 vue-router 的问题，而是样式或其他问题，但我的数据太少，无法给出好的答案。您可以使用top navbar-dropdown 的值。

【参考方案1】：

通过在具有 vue-router 子级的列上方添加换行符 <br> 来解决此问题。

永远不要过度复杂化 vue 或 bulma 的简单性！

【讨论】：

你在列上方添加了什么？

嗨@Ralf，不知道这个答案发生了什么。我想我添加了一个边距：0 或 z-index 或两者！