Back button not working with pushstate

Questions
1

Im trying to get pushstate to work, so if you load http://localhost/testsidan/#!/about/1234/ it will show that in the address and if you refresh the page it will load the the “about” page.

The problem I have is that if I use the below code then the back button stops working and it points to http://localhost/testsidan/# so I can´t go back to the startpage.

So what Im I doing wrong?
How should I properly set this up?
Also, can you somehow remove the #! from the url ?

I have this code in my js.

var mainView = app.views.create('.view-main', {
  name:'mainView',
  url: '/startsidan/',
    pushState: true,
    pushStateSeparator: '/#!',
    pushStateOnLoad: true,
    pushStateRoot: '/testsidan',
    stackPages:true
});

And this is the router file.

var routes = [
  // Index page
  {
    path: '/',
    url: './index.html',
    name: 'home',
  },
  // About page
  {
    path: '/about/:id',
    url: './pages/about.html',
    name: 'about',
  },
    {
    path: '/startsidan/',
    url: './pages/startsidan.html',
    name: 'startsidan',
  }
]

If I use

pushStateSeparator: ‘/#!’, and pushStateOnLoad: true

then I can both reload the page and paste it in a new browser window and load the about page!
But then the back button is not working.

And if I set

pushStateOnLoad: false

then I can´t reload the page, then it loads the startpage but the backbutton works.

So how can I set it up so it all works?
So it shows the right adress.
So I can reload the page and it loads the about page.
So I can copy the url and paste it in a new browser window and it loads tha about page.