When framework7 jumps according to the routing page, how does the url change to the corresponding route?

problem description

for example, on the home page of http://xxx/index.html-sharp/, click a link to go to the application page, but the browser"s url has not changed; how to make the url also change to the corresponding route http://xxx/index.html-sharp/applic.? Like the route jump of vue, does url change?

related codes

routes = [{
        path: "/",
        url: "./index.html",
    },
    // Page Loaders & Router
    {
        path: "/table/",
        componentUrl: "./pages/table.html",
    },
    {
        path: "/application/",
        componentUrl: "./pages/application.html",
    },
];
<div class="row no-gap">
   <a href="/application/" class="col page-content-item"></a>
   <a href="/table/" class="col page-content-item"></a>
</div>

Please also tell the great god who knows, thank you.

Jan.27,2022

finally solved. The latest version of f7 should set pushState:

like this.
var app = new Framework7({
    root: '-sharpapp', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    view: {
        pushState: true,
    },
});

add pushState: true to main.js try

new vue({
    framework7: {
        // App Root Element, should be the same as the component root "el"
        root: '-sharpapp',
        // Array with app routes
        routes: router,
        pushState: true
    }
})
  
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea24c5-1bc7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea24c5-1bc7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?