shop-back/src/App.vue

<template>
  <a-layout class="layout">
    <LayoutHeader />
    <a-layout-content>
      <div ref="contentRef" class="content">
        <div class="content-layout">
          <RouterView v-slot="{ Component }">
            <KeepAlive>
              <component :is="Component" />
            </KeepAlive>
          </RouterView>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, provide } from 'vue'
import LayoutHeader from '@/layout/header.vue'
import { getImgSrc } from '@/utils/getImgSrc'
import browser from '@/utils/browser'
import { useLocale } from './locales/useLocale'
import { LocaleType } from '#/config'
import { useI18n } from './hook/useI18n'
provide('getImgSrc', getImgSrc)
export const contentRef = ref<HTMLDivElement>()

export default defineComponent({
  name: 'App',
  components: {
    LayoutHeader
  },
  setup() {
    onMounted(() => {
      const { t } = useI18n()
      const websiteTitle = t('base.websiteTitle')
      document.title = websiteTitle
    })
    return { contentRef }
  }
})
</script>

<style lang="scss" scoped>
.content,
.layout {
  height: 100%;
}

.content {
  overflow-y: auto;
}
</style>