我将 Vue 与 VueRouter 结合使用。
我的页面上有一个后退按钮,我现在正在设置 @click
操作来执行 $router.back()
。
<a class="btn-back" @click="$outer.back()"></a>
但如果直接打开页面(没有以前的历史记录 url),则没有任何反应。
在这种情况下,我希望将页面替换到特定位置(例如主页)。我该怎么做?
我一直在寻找一种技术来判断历史是否为空且没有运气。
最佳答案
最后我找到了一个棘手的方法来做到这一点。
实际上,如果历史堆栈中还有其他上一页,在我们调用 $router.back()
之后,路由信息应该已经更改。
因此,我们可以在$router.back
之后检查路由并判断路由是否已更改。如果路由未更改,则意味着历史堆栈为空,然后我们执行 $router.replace()
。
总的来说,我写了这样一个方法:
import _ from 'lodash'
export default {
// ...
methods: {
backOrRedirect (route) {
const vm = this
const originRoute = { ...vm.$route }
vm.$router.back()
// Of course, we must detect until a $nextTick is reached
vm.$nextTick(() => {
// If the route is not changed, we do the redirect
if (_.isEqual(originRoute, vm.$route)) {
// Redirect to the home path by default
vm.$router.replace(route || '/')
}
})
}
}
// ,,,
}
I use lodash to compare between the origin route and the newRoute object.
因此,我们可以很容易地调用 vm.backOrRedirect(url)
来启动一个 $router.back()
,它肯定会回退到重定向到某个页面历史堆栈为空。
关于javascript - 我怎样才能检测到 Vue $router.back() 已完成,而不是空历史堆栈的情况?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58785283/