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'
provide('getImgSrc', getImgSrc)
export const contentRef = ref<HTMLDivElement>()

export default defineComponent({
  name: 'App',
  components: {
    LayoutHeader
  },
  setup() {
    onMounted(() => {
      const lang = browser.getURLParam('lang')
      console.log('lang', lang)
      const { changeLocale, getLocale } = useLocale()
      if (lang) {
        changeLocale(lang as LocaleType)
      } else {
        changeLocale('zh')
      }

      // localeStore.initLocale()
      // changeLocale('zh_CN')
      // console.log('getLocale', getLocale.value)
    })
    return { contentRef }
  }
})
</script>

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

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