什么是 SPA 应用？
在今天的互联网应用中，我们通常可以看到两种不同的方式来进行页面的开发。传统的多页应用（MPA）和单页应用（SPA）。多页应用是指每个页面的展示都有独立的 HTML 页面，点击链接时会发生页面的跳转，整个过程需要重新请求服务端来获取页面信息。而单页面应用在初始请求系统的响应HTML文件后，依赖JS来动态修改HTML的内容，不会重新请求服务。
SPA 应用通常使用 Vue.js ，React 或者 Angular 等前端框架来进行开发。需要注意的是，在 SPA 应用中，页面之间的内容通常是通过 JavaScript 来动态渲染的，所以我们需要花费更多的时间来设计我们的前端应用架构。
多级菜单是什么？
多级菜单是指在网页的某个位置上，有一系列的菜单选项 ，并且菜单之间有固定的从属关系，形成父子级的结构。多级菜单可以支持用户在组织复杂信息时进行分类和层级化展示 。这些菜单通常会随着用户的鼠标浮动而动态展开菜单项，并在用户点击时进行页面的跳转或者相应的处理。
SPA 应用中如何实现多级菜单？
实现多级菜单在传统的多页应用（MPA）中是相对容易的。但是在 SPA 应用中却可能变得更加困难。单页应用侧重于以更好地用户体验为目标，但使用本地路由器来控制导航时，这种按需渲染的方法并不总是适用的。以下是 SPA 应用中实现多级菜单的一些指南。
1. 结合 Vue.js 和 Vue-Router
Vue.js 是当前较为流行的 SPA 应用框架之一，它不仅提供了基础的组件、指令等等，还可以便捷地操作网页的各种元素，并且还拥有自己的路由器 Vue-Router 。通过 Vue-Router，可以在网页中动态设置路由，从而实现无刷新页面加载、动态模块加载、模块按需加载等功能。
对于多级菜单来说，Vue-Router 有一个非常方便的功能 - 嵌套路由。Vue-Router 将路由的关系也得以体现在菜单的层级关系中。具体代码如下：
-- -------------------- ---- -------
----- ------ - --
----- --------
---------- -----
--------- -
-
----- ----------
---------- -------
--
-
----- -----------
---------- ---------
--------- -
-
----- ------
---------- --------
----- ---------
-
-
-
-
---其中 children 是路由对象中的一个数组，用来表示该路由下挂载的子路由。注意，这样嵌套的路由的深度是没有限制的，你可以自由组织你喜欢的层级结构。
2. 利用事件总线来实现组件间通信
在 SPA 应用中，不同的组件的交互是非常重要的。我们需要利用事件总线来实现组件间通信。Vue.js 提供了一个事件总线 - Vue.prototype.$bus。通过 $bus.$emit 和 $bus.$on 两个方法，可以实现一个全局的事件总线。具体代码如下：
// events-bus.js import Vue from 'vue'; export const EventBus = new Vue();
现在我们可以在某个组件中使用 EventBus 来触发一个另一个组件实现菜单状态的更新：
-- -------------------- ---- -------
-- ----------
------ - -------- - ---- -------------------------
------ --------- - ---------
------ ---------- -
--------------------------------------------- -------
-我们在子组件中监听事件总线，以便根据父组件的状态进行菜单的展开和关闭：
-- -------------------- ---- -------
-- ------------
------ - -------- - ---- -------------------------
------ --------- - ---------
------ --------- -
------------------------------------------- ----- -------- -- -
----------- - ----
---
-3. 使用 CSS 实现菜单的样式
在 SPA 应用中，实现好看的多级菜单不是件容易的事情。因此，我们需要使用 CSS 实现菜单的样式。这样就可以有一个独立的样式文件来帮助我们实现菜单的设计。这会使我们的代码更加模块化，并且降低了代码的复杂性。
-- -------------------- ---- ------- ----------- - -------- ----- ----------- ----- -------------- -- ------------- -- - ----------- - -- - --------- --------- -------------------- ----- --------------------------- --------- -------------------- ------ ----------------- -------------- - ----------- - -- - - - -------- ------ ----------- -------- -------------- ---- ------ ----- ---------- ----- ------------ ---- --------------- ---- ------------ ----- -------- - ----- --------- --------- ---------------- ----- --------------- ---------- -------------------- ----- --------------------------- --------- -------------------- ------ ----------------- -------------- - ----------- - -------- - - - ----------------- -------- ------ ----- - -- ----- -- ----------- -------------- - -------- ----- --------- --------- ---- ----- ---------- ------ ------ -- -------- --- ----------- ----- -------------- ---- ------- --- ----- -------- ----------- - --- --- ------- -- -- ------ ----------- ---- -------- -- ---------- ----- - ----------- - -------- -------------- - -------- ------ -
示例代码
最后，这是一个示例文件夹结构样例，展示了如何实现一个多级菜单。
-- -------------------- ---- ------- --- -------- --- ---------- --- --- ------------ --- --- ---------- --- --- ----------- --- ------- --- ------ --- --- -------- --- ----- -- --- -------------
结论
在 SPA 应用中，我们可以使用 Vue.js 和 Vue-Router 来实现多级菜单。在一个 Vue.js 应用中，使用 EventBus 来在组件间通信可以大大提高组件之间的灵活度。使用一些简单的 CSS 技巧，我们可以使菜单变得更加美观。掌握这些技能，可以提高我们的前端开发技能，为我们的 SPA 项目增加更多的功能和灵活性，带来更佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67380786317fbffedf0dcaf2