vue router: go up one (variable) level - vuejs2

Question

seems nobody had this question before...? (or i just don't know the right words for it :D )
i want to have a very basic heading on every page of my app, which allows the user to go "up". simple as that.
example: user is on page.com/users/browse/, clicks on the heading, gets navigated to page.com/users/, clicks again, gets navigated to page.com. nothing more. it just has to be variable, so i can put it in a component and have it just work everywhere
how can i do that? i tried vue.$route, but there is only a string of the complete url. is there any convenient way to do it? or do i HAVE to split the url by / and build the route myself?
thanks :)

Answer 1

Try using this: this.$router.replace("./");
I don't know how it is working though. The single dot(./) will go up one path and double dots(../) will go up 2 paths!

Answer 2

This functionality has a name "Breadcrumbs".
Check this: 1, 2, 3 or look for this in your framework.

Answer 3

Try adding a method for going up one level by getting the route's path and then splitting it. Here's what worked for me:
upOneLevel(){
var upperPath = this.$route.path.split("/")
if(upperPath.length > 0) {
upperPath.splice(upperPath.length-1)
this.$router.push(upperPath.join("/"))
}
}
Then you can add a button that calls this method to go up by one level but no further than the root. This method will work regardless of whether or not your routes were nested properly.

Answer 4

this.$router.replace("./") will help if the user clicks on the heading only once, if he try to clicks again nothing is happen because vue-router avoid redundant navigation to the same location.
You can catch this error then navigate to the root, (or to a named route) if you have only two levels in your routes.
NOTE :
This function works only for two levels (see the example of this Question)
goUp() {
this.$router.replace("./").then(err =>{
if(err)
this.$router.replace("/");
// or : this.$router.replace({name:"home"}); for named routes
})
}

Answer 5

You can get the current path using this.$route.path and than remove the last party by splitting/splicing it:
goUp(){
var upperPath = this.$route.path.split("/")
if (upperPath.length > 2) {
upperPath.splice(upperPath.length - 1)
this.$router.push(upperPath.join("/"))
} else {
this.$router.push('/');
}
}

Answer 6

The already mentioned this.$router.replace("./"); will add a trailing slash.
If this is not your intention, use this.$router.replace(".");
Moreover, if you want to make a new history event, use this.$router.push(".");