Nuxt.js - Генерация Nuxt не передает параметр onclick компоненту на странице 404 - PullRequest
Новая
       8

Nuxt.js - Генерация Nuxt не передает параметр onclick компоненту на странице 404

0 голосов
/ 27 мая 2018

У меня странная проблема с моим 404 / index.vue, которая после $ nuxt generate создает мой 404.html файл.Я использую компонент Btn в моем файле vue, который работает с файлом 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, и я не могу понятькакая разница будет. Каким-то образом Btn не получает функцию onclick для шаблона 404.

Если я добавлю / 404 к маршрутизатору и запусту приложение локально, Btn будет работать.в случае, когда я генерирую статические страницы, что Btn больше не работает с шаблоном 404 vue.

Есть идеи, что может быть причиной для этого?

...