I'm using Vue with VueRouter.
And there is a back button on my page, I'm now setting the @click
action to do $router.back()
.
<a class="btn-back" @click="$outer.back()"></a>
But if the page is opened directly (without a previous history url), nothing happend.
In this case, I want the page replace to a specific location (home page for example). How can I do that?
I've been looked for the techique to tell if the history is empty with no luck.
Finally I found a tricky way to do this.
Actually, if there is some other previous page in the history stack, after we call $router.back()
, the route info should have been changed.
So, we can check the route and tell if the route is changed, after $router.back
. If the route is not changed, it means the history stack is empty, then we do the $router.replace()
instead.
Overall, I wrote such a method:
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.
So, we can easily call vm.backOrRedirect(url)
to launch a $router.back()
, which will definitely fall back to redirect to some page when the history stack is empty.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.