bbs.hoolihome.com/pages/index.vue

<template>
  <section class="page-container container-index">
    <my-header ref="myHeader"/>
    <div class="page-wrap">
      <div class="nav-container">
        <div class="nav-wrap">
          <a
            :href="`/${wwwURL}/${locale}`"
            target="_blank"
            class="logo">
            <img
              :src="`//static.hoolihome.com/common/default/logo-${locale}.png`"
              alt="Logo">
          </a>
          <ul class="tabs">
            <li
              v-for="(item,index) in tabs"
              :key="index"
              :class="{'item':true,'active':tabActiveIndex===index}">
              <a
                :href="item.url"
                class="link">{{ item.name }}</a>
            </li>
          </ul>
        </div>
      </div>
      <nuxt-child/>
    </div>
    <my-footer :friendship-link-arr="friendshipLinkArr"/>
  </section>
</template>

<script>
import MyHeader from '~/components/common/MyHeader'
import MyFooter from '~/components/common/MyFooter'
import { php_api_link_list } from '~/common/apis.js'
import { wwwURL } from '~/common/config.js'

export default {
  async asyncData({ app, store }) {
    let friendshipLinkArr = await app.$axios
      .$post(php_api_link_list)
      .then(res => {
        if (res) {
          let { code, data } = res
          code = parseInt(code)
          if (code === 0 && data && Array.isArray(data.list)) {
            return data.list
          }
        }
        return []
      })
      .catch(e => {
        return []
      })
    return { friendshipLinkArr }
  },
  head() {
    let title = ''
    let keywords = ''
    let description = ''
    let { locale } = this.$store.state
    if (locale === 'cn') {
      title = '海外租房_美国|英国|澳洲|加拿大留学生租房_留学生公寓-hooli社区'
      keywords =
        '海外租房,美国租房,英国租房,澳大利亚租房,加拿大租房,留学生公寓,留学生租房'
      description =
        'hooli社区是解决海外租房,留学生租房问题的网站，提供美国租房、英国租房、澳大利亚租房、加拿大租房等全球热门国家500+城市租房和海外高校生活、留学生租房问题解答。'
    } else if (locale === 'en') {
      title =
        'Overseas Rentals_International Student Rentals_International Student Residences - hooli Community'
      keywords =
        'International student apartments, study and rent, study abroad, house rental, overseas rental prices, overseas rentals, overseas rentals, overseas purchases, overseas purchases, overseas living services'
      description =
        "Hooli, the preferred platform for studying abroad to rent a house, the listing is located in 500+ cities in the world's most popular study countries, providing 200,000+ rooms, covering all major overseas universities, real-time updating of the latest information on renting a house, international student housing, overseas real estate, etc. Effective, welcome to free consultation."
    }
    return {
      title,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: keywords
        },
        {
          hid: 'description',
          name: 'description',
          content: description
        }
      ]
    }
  },
  components: {
    MyHeader,
    MyFooter
  },
  data() {
    return {
      wwwURL,
      locale: this.$store.state.locale,
      friendshipLinkArr: [],
      tabs: [],
      tabActiveIndex: 0
    }
  },
  scrollToTop: true,
  validate({ route, redirect }) {
    const { fullPath } = route
    if (fullPath === '/cn') {
      return redirect(301, '/')
    } else if (fullPath.startsWith('/cn')) {
      return redirect(301, fullPath.replace('/cn/', '/'))
    } else {
      return true
    }
  },
  created() {
    let { locales, locale } = this.$store.state
    let { fullPath } = this.$route
    let flag = false //路由是否带语言，默认不带
    locales.some(val => {
      if (fullPath.indexOf(`/${val}`) === 0) {
        flag = true
        return true
      }
    })
    this.tabs = [
      {
        name: this.$t('tabHome'),
        url: flag ? `/${locale}` : '/'
      },
      {
        name: this.$t('tabVideos'),
        url: flag ? `/${locale}/videos` : '/videos'
      }
    ]
  },
  methods: {
    handleShowView() {
      this.$refs.myHeader.handleShowView('LoginByPassword')
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  .page-wrap {
    width: 100%;
    margin: 0 auto;
    .nav-container {
      background-color: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .nav-wrap {
        display: flex;
        align-items: center;
        width: 1200px;
        height: 75px;
        margin: 0 auto;
        padding: 0 5px;
        .logo {
          width: 109px;
          font-size: 0;
          img {
            width: 100%;
          }
        }
        .tabs {
          display: flex;
          align-items: center;
          margin: 0 60px;
          .item {
            position: relative;
            height: 20px;
            line-height: 20px;
            &:not(:last-child) {
              margin-right: 40px;
            }
            .link {
              font-size: 14px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              color: rgba(0, 0, 0, 1);
              &:hover {
                color: #ff523d;
              }
            }
          }
        }
      }
    }
  }
}
</style>