Skip to content

Latest commit

 

History

History
97 lines (89 loc) · 2.69 KB

53-%E5%A4%9A%E9%A1%B5%E7%AD%BE%E8%B7%AF%E7%94%B1%E5%8A%9F%E8%83%BD%E8%B0%83%E6%95%B4.md

File metadata and controls

97 lines (89 loc) · 2.69 KB

目标

完成多页签路由功能调整部分。

开发

测试完成后接下来我们就需要处理一下我们在base-layout中写的所有的路由部分，最终我们还是需要在内容区域去嵌套一些东西的，所以接下来我们就需要将内容区域抽成独立的组件，方便我们进行开发。
我们在base-layout中创建一个wrap-content.vue的文件。

<script lang="ts" setup>

</script>

<template>
  <router-view />
</template>

<style scoped>

</style>

我们先把路由部分抽取出来。
然后替换到布局页面。

<script lang="ts" setup>
  import WrapContent from './wrap-content.vue'
</script>

<template>
  <MobileLayout
    v-if="isMobile"
    v-model:visible="visible"
    :logo="layout.logo"
    :title="layout.title"
  >
    <template #headerRight>
      <RightContent />
    </template>
    <WrapContent />
  </MobileLayout>
  <template v-else>
    <MixLayout
      v-if="layout.layout === 'mix'"
      v-model:collapsed="layout.collapsed"
      :logo="layout.logo"
      :title="layout.title"
      :active="active"
      :options="menuOptions"
      :show-sider-trigger="layout.showSiderTrigger"
      :sider-width="layout.siderWidth"
      :sider-collapsed-width="layout.siderCollapsedWidth"
    >
      <template #headerRight>
        <RightContent />
      </template>
      <WrapContent />
    </MixLayout>
    <SideLayout
      v-if="layout.layout === 'side'"
      v-model:collapsed="layout.collapsed"
      :logo="layout.logo"
      :inverted="layout.layoutStyle === 'inverted'"
      :title="layout.title"
      :show-sider-trigger="layout.showSiderTrigger"
      :sider-width="layout.siderWidth"
      :sider-collapsed-width="layout.siderCollapsedWidth"
    >
      <template #headerRight>
        <RightContent />
      </template>
      <WrapContent />
    </SideLayout>
    <TopLayout
      v-if="layout.layout === 'top'"
      :logo="layout.logo"
      :title="layout.title"
      :inverted="layout.layoutStyle === 'inverted'"
    >
      <template #headerRight>
        <RightContent />
      </template>
      <WrapContent />
    </TopLayout>
  </template>
</template>

我们来测试一下我们的功能是否可以正常使用。
可以正常使用的情况下我们就可以把多页签的功能迁移到这里了。
首先删掉我们之前在base-layout中测试的多页签，放到这里进行处理。

<script lang="ts" setup>
import MultiTab from '../multi-tab/index.vue'
</script>

<template>
  <MultiTab />
  <router-view />
</template>

然后测试是否正常展示