目录
- 一、新建layouts
- 二、更新App.vue文件
- 三、选择一个布局（Layout）
- 四、通用菜单Menu的实现
- 菜单路由改为读取路由文件
- 五、绑定跳转事件
- 六、同步路由到菜单项
一、新建layouts
-
这里新建一个专门存放布局的布局文件layouts：
-
然后在该文件夹（layouts）下创建
BasicLayout.vue文件：
注意，不要忘记<router-view />，对于一个布局来说，我们肯定是希望可以动态的展示不同的页面。只不过是导航栏、底部信息等这些都是由固定区域的，所以才叫固定布局。
之后不要忘记在App.vue文件中引入该布局（BasicLayout.vue）
二、更新App.vue文件
解释：在<template>部分中包含了我们刚刚创建的BasicLayout组件。另外，习惯上使用id="app"包裹整个内容，方面后续页面的渲染（当然使用id="app"来进行标识只是一个习惯而已）。
三、选择一个布局（Layout）
我们在Arco Design官网中选择要layout布局，这里选择了一个上中下的布局
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout-content>Content</a-layout-content>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
将其放入BasicLayout.vue文件中，最终BasicLayout.vue文件更新如下：
<template>
<div id="basicLayout">
<a-layout style="height: 400px">
<a-layout-header class="header">导航栏</a-layout-header>
<a-layout-content class="content">
<router />
</a-layout-content>
<a-layout-footer class="footer">
<a href="https://www.lanqiao.cn//" target="_blank">
Online Judge by ly
</a>
</a-layout-footer>
</a-layout>
</div>
</template>
<style scoped>
#basicLayout {
}
#basicLayout .header {
background: red;
margin-bottom: 16px;
}
#basicLayout .content {
background: linear-gradient(to right, #eee, #fff);
margin-bottom: 16px;
}
#basicLayout .footer {
background: #efefef;
padding: 16px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
</style>
效果如下：
四、通用菜单Menu的实现
由于这里菜单的制作有点复杂，所以这里将其抽象成一个公共的组件，创建为为GlobalHeader.vue文件。依然是在Arco Design官网中选择一个Menu：
<a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
<a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
<div
:style="{
width: '80px',
height: '30px',
background: 'var(--color-fill-3)',
cursor: 'text',
}"
/>
</a-menu-item>
<a-menu-item key="1">Home</a-menu-item>
<a-menu-item key="2">Solution</a-menu-item>
<a-menu-item key="3">Cloud Service</a-menu-item>
<a-menu-item key="4">Cooperation</a-menu-item>
</a-menu>
之后，加入logo图片，并设置css样式：
效果如下：
现在将菜单
根据路由文件动态生成（什么是路由：访问不同的地址会加载不同的页面），即菜单上的路由改为读取路由文件（router中的index.ts，由脚手架自动生成），从而实现更通用的动态配置。
那么如何实现上述更通用的动态配置的，下面我们来一步一步实现。
菜单路由改为读取路由文件
我们知道，脚手架已经自动生成了一个路由文件，但是其中的routes路由是定义在index.ts文件中，如下：
下面我们一步步进行实现
- 第一步：在router文件中新建一个
routes.ts文件。 - 第二步：提取通用路由文件（在
index.js中），提取之后直接在新建的routes.ts文件中导入即可。如下
现在路由文件就可以为菜单项提供服务了。
- 第三步：修改
GlobalHeader.vue文件，如下：
// 核心代码
<a-menu-item v-for="item in routes" :key="item.path">
{{ item.name }}
</a-menu-item>
解释：上述代码使用了Arco Design Vue中的<a-menu-item>组件来动态生成菜单项。
效果如下：
可以显示高亮，但是并不进行页面的跳转
五、绑定跳转事件
现在我们进行事件的绑定。
效果演示：
现在，已经能够根据点击路由跳转到对应的页面，但是如果能够根据当前的页面地址激活页面对应的状态（即同步路由到菜单项）。
六、同步路由到菜单项
修改GlobalHeader.vue文件。关键代码如下：
const router = useRouter();
const selectedKeys = ref(["/"]); // 默认主页
router.afterEach((to, from, failure) => {
selectedKeys.value = [to.path];
});
至此，通用菜单到这里就完成了。
梳理下思路：首先点击菜单项=>跳转更新路由=>更新路由后，同步去更新菜单栏的高亮状态（即使刷新页面也会保持当前菜单项的高亮状态）。
