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

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

this.$router.go(-1(

使用Vue Router(Nuxt 使用(返回一个历史步骤的命令：

this.$router.go(-1)

使用单击侦听器，在函数中触发它，如下所示：

模板：

<div @click="goToPrev()">My Button</div>

方法：

methods: {
goToPrev() {
// ...
// Do other logic like logging, etc.
// ...
// Tell router to go back one
this.$router.go(-1);
},
}

再比如：

使用 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>

Answer 2

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

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