Блог

В принципе, я хочу, чтобы динамическая ссылка была на моей a href основе на основе кода. Где я хочу, чтобы моя ссылка была на example2.com когда веб-сайт, использующий мой код NuxtJS, example1.com .. Однако оно всегда будет связано с / вместо example2.com .. Это действительно странно, поскольку это хорошо видно в инструменте проверки Vue и в {{ backHref }} том, что он уже возвращается example2.com .. Однако это не отражает :href

 /* eslint-disable vue/no-v-html */
<template>
  <div class="h-100 bg-ededed">
    <a :href="backHref">{{ backHref }}</a>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  meta: { noFooter: true },

  computed: {
    ...mapState({
      chatRooms: (state) => state.chat.chatRooms
    }),
    backHref() {
      let link
      if (this.chatRooms.length === 1) {
        console.log(`this.isExample: ${this.isExample}`)
        if (this.isExample) {
          console.log('went here 1')
          link = 'https://example2.com'
        } else {
          console.log('went here 2')
          link = '/'
        }
      } else {
        link = '/chat/'
      }
      console.log(
        `this.addChannelCodeLink(link): ${this.addChannelCodeLink(link)}`
      )
      return this.addChannelCodeLink(link)
    },
    getDomain() {
      let host
      if (process.client amp;amp; window) {
        host = window.location.host
      }
      return host
    },
    isExample() {
      return this.getDomain ? this.getDomain.includes('example1.com') : false
    }
  },
  methods: {
    addChannelCodeLink(link) {
      if (this.$route.query.r) {
        link  = `?r=${this.$route.query.r}`
      }
      return link
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

Console.log будет что-то вроде этого:

 - While in SSR
this.isExample: false
went here 2
this.addChannelCodeLink(link): /

- In Client
this.isExample: true
went here 1
this.addChannelCodeLink(link): http://example2.com