Vue Router Parameter Object Type Change On Browser Back Button

Question

I am passing a parameter forum, which is an Object to a route in Vue.js (using vue-router)

  {
    path: \'/forum/:forum\',
    name: \'ForumView\',
    component         


        

Answer 1

"But when using the back button of the browser (accessing the history), the object is converted into a string"

...this is not entirely correct. The object is converted to a string much sooner - at the time you are navigating to your forum route to be precise. When you use back button, there is no object at all. There is only URL with dynamic :forum segment replaced by the text "[object Object]" (just check browser's URL bar)

This is the problem when passing objects through the router. Because even if you use Router in history mode and the browser's history API is used behind the scenes, router doesn't store any parameters when calling history.pushState. It pushes only URL. So if you really need something to pass to a target component, that information should by encoded in the URL (route definition) in the form of dynamic segment or as query string...

Another benefit of such solution is that your app doesn't stop working when user copy/paste the URLs :)

Or you can use something like Vuex to create shared state and only pass around some simple identifier which is much easier to put in the url/route...