Online Judge——【前端项目初始化】项目通用布局开发及初始化

一、新建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];
});

至此，通用菜单到这里就完成了。

梳理下思路：首先点击菜单项=>跳转更新路由=>更新路由后，同步去更新菜单栏的高亮状态（即使刷新页面也会保持当前菜单项的高亮状态）。