Vue路由器上一页，无需重新加载

Question

I'm trying to create a back button to go to the previous page using the vue-router in vuejs that would work exactly like the browser's back button. The problem is, when using history mode for the router, when I do

this.$router.go(-1);

it actually refreshes the page, which is quite annoying, and the browser's back button does not. If I remove history mode, it works as expected, exactly like the browser's back button. However, in this case, I need to deal with the ugly hashtag in the URL. Also, since I only need this button for a few pages, I could also use keep history mode, but instead of making the back button actually go to the previous page, I could toggle around some values to change which dynamic component is shown, but not actually change the current page. However, if I do this, the browser's back button wouldn't work as expected anymore, since it clearly can't toggle the state.

Is there any way to make a button that works exactly as the browser's back button does? As in, make a back button that does not refresh the page, not have a hashtag in the URL, and still work with the browser back buttons?

EDIT: Was going to delete since I realised it's not a problem with the code, it's a problem with the testing, but I'll keep it here just in case it's useful to someone. When I was going to my route with the back button, there was no button to go to that route, so I would need to directly enter it into the URL. However, this effectively wipes all the stored states, so my back button didn't work properly. If I navigated to that page from another page, then my back button worked as expected.

Answer 1

您可以使用window.history.back()直接模拟点击浏览器的后退按钮。

Answer 2

这样尝试

 this.$router.back()