Question

我正在处理一个相当新的Nuxt项目，并且遇到设置后退按钮的问题。我什至看着“ vue-router-back-button”包仍然不起作用（我收到了不相关的错误）。使用我拥有的代码，该链接希望导航到用户当前所在的页面，而不是上一个页面。我在服务器上确实收到一个错误，提示Invalid prop: type check failed for prop "to". Expected String, Object, got Function.，但是我可以使后退按钮变为动态吗？

<template>
  <div class="page-title-wrapper">
    <nuxt-link
      v-if="back"
      :to="to"
      class="back-wrapper">
      <icon
        name="angle-left"
        fill="#9e9e9e"
        height="20px"
        width="20px"
        class="d-flex" />
      <p class="display-1 grey--text">
        Back
      </p>
    </nuxt-link>
    <h1 class="display-3 text-center">
      {{ text }}
    </h1>
  </div>
</template>

<script>
  export default {
    props: {
      back: {
        type: Boolean,
        default: false,
      },
      text: {
        type: String,
        default: 'Page'
      }
    },

    methods: {
      to() {
        this.$router.go(-1);     <---- evaluates to current page?
      },
    }
  }
</script>

Answer 1

您也可以通过检查窗口历史长度来使用它。如果窗口历史记录为 1 或小于 1，则它将返回到您的主页。更实用。

 window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')

Answer 2

我最终仅使用了Vuetify的普通<v-btn>：

  <template>  
    <v-btn
      text
      :ripple="false"
      class="back-wrapper"
      @click="to">
      <icon
        name="angle-left"
        fill="#9e9e9e"
        height="20px"
        width="20px"
        class="d-flex" />
      <p class="display-1 grey--text">
        Back
      </p>
    </v-btn>
  </template>

  <script>
    methods: {
      to() {
        this.$router.go(-1);
      },
    }
  </script>

如何使用NuxtJS <nuxt-link />创建后退按钮？

2 个答案: