1

我的 404/index.vue 有一个奇怪的问题，它在$ nuxt generate生成我的404.html文件之后。我在我的 vue 文件中使用了一个 Btn 组件，它适用于index.vue文件，但不适用于我的404/index.vue. 似乎它没有将 onclick 参数传递给组件。

我认为以下内容更容易理解：404/index.vue

<script>
import { mapGetters } from 'vuex'
import Heading from '~/components/Heading/Heading.vue'
import Btn from '~/components/Btn/Btn.vue'

export default {
  components: {
    Heading,
    Btn
  },
  computed: {
    ...mapGetters(['defaultLang', 'currentLang']),
    ...mapGetters('data', ['getPageBySlug']),
    page () {
      return this.getPageBySlug('404')
    }
  },
  data: () => ({
    externalRoute: false
  }),
  beforeRouteEnter (to, from, next) {
    // check before route entering if we came from external or already from our app
    next(vm => {
      if (from.path === '/') {
        vm.externalRoute = true
      } else {
        vm.externalRoute = false
      }
    })
  },
  methods: {
    getBackPath () {
      return `/${this.currentLang !== this.defaultLang ? this.currentLang : ''}`
    },
    goBack () {
      // if we came externally we go to our root, else we go one route back in history
      if (this.externalRoute) {
        this.$router.push('/')
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<template>
  <div class="Page">
    <Heading :level="1">{{ page.title }}</Heading>
    <Btn :click="goBack">{{ $t('error.link') }}</Btn>
  </div>
</template>

如您所见，goBack 函数应传递给 Btn 组件。生成静态页面后，按钮就在那里（带有正确的语言 error.link），但点击时它不会做任何事情。

我的按钮组件如下所示：（我对其进行了一些简化以减少此处的重要内容：

<script>
export default {
  name: 'Btn',
  props: {
    click: {
      type: Function,
      default: () => {},
      required: false
    }
  }
}
</script>

<style src='./Btn.scss' lang='scss'></style>

<template>
  <component
    class="Btn"
    v-on:click="click"
    <slot />
  </component>
</template>

我在我的 index.vue 中使用了相同的按钮组件，它呈现在起始页面上。Btn 在那里工作得很好（也在 $ yarn generate 之后，我不知道会有什么区别。不知何故，Btn 没有收到 404 模板上的 onclick 功能。

如果我将 /404 添加到路由器并在本地运行应用程序，则 Btn 可以工作。当我生成 Btn 不再适用于 404 vue 模板的静态页面时，这真的只是孤立的。

知道这可能是什么原因吗？

4

0 回答 0