F7 Vue tabs pushState not working

Questions
1

He, I’ve been looking for a solution for a few hours (this forum, google, stackoverflow), nothing seems to work.

Expected behaviour:
I have a tabbed toolbar and I wan’t the URL to update like a normal website.

  • Running on localhost:8080/

  • Params like path: "/tour/:tourId/", are working as expected, the URL just always stays the same.

This is what i tried so far and it didn’t work:

  1. Putting :push-state="true" on <f7-views>
  2. Putting :push-state="true" on first <f7-view> (inside views)
  3. Putting :push-state="true" on all <f7-view>
  4. Putting pushState: true inside f7params (inside view: {})
  5. Disabling history mode in f7params
  6. Setting pushState to false inside f7params (inside view: {})
  7. Putting pushState: true inside every route in routes.js

Setting URL manually doesn’t work either. Tried:
http://localhost:8080/profile (not working, shows main tab — homepage)
http://localhost:8080/profile/ (not working, 404)

http://localhost:8080/#/profile (not working, shows main tab — homepage)
http://localhost:8080/#/profile/ (not working, shows main tab — homepage)

http://localhost:8080/#!/profile (not working, shows main tab — homepage)
http://localhost:8080/#!/profile/ (not working, shows main tab — homepage)

Running on F7 version 4.0.8

Whats the current correct solution for this?
It seems its been changing every year/version.

2

Push State works only for pages/tabs navigation within single View, it can’t switch tabs/views

3

@nolimits4web Is this a feature that could eventually be added to F7?