<template>
  <div id="app">
    <router-view v-if="routes.find((i) => i.path === $route.path)" />
    <layout v-else />
    <!-- <router-view /> -->
  </div>
</template>

<script>
  import { updateDocumentTitle } from '@/utils/document-title-util';
  import layout from '@/layout';
  import { routes } from './router/routes';
  export default {
    name: 'App',
    components: { layout },
    data () {
      return { routes };
    },
    created () {
      console.log(this.$route.path);
      // 恢复主题
      this.$store.dispatch('theme/recoverTheme');
    },
    methods: {
      /* 路由切换更新浏览器标题 */
      setDocumentTitle () {
        updateDocumentTitle(
          this.$route,
          (key) => this.$t(key),
          this.$store.state.theme.tabs
        );
      }
    },
    watch: {
      '$i18n.locale' () {
        this.setDocumentTitle();
      },
      $route () {
        this.setDocumentTitle();
      }
    }
  };
</script>
