Hello, I'm working on upgrading our Vue2 project to Vue3, and encountered some issues after switching from BTV (BootstrapVue) to BSVN (BootstrapVueNext). Two of them are related to Navbar menu and submenu.

The first issue is for menu without submenu, i.e. b-nav-item. For some reason, such menu item will not route to the linked page, rather, it just stays on the same page. I compared the DOM generated betweeen the BSV version and BSVN version: in both cases the b-nav-item is converted into "a" tag of class nav-link wrapper inside "li" tag of class nav-item. However, for the latter case, the "a" tag has an extra property replace="false". I looked up "a" tag properties, and it appears that "replace" is not a standard property, as I can't find it in the documentation.

Below is the generated nav-bar elements in the DOM:
<span class="nav-span"> <li class="nav-item" id="/dashboard"> <a class="nav-link" replace="false" href="#"> <span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="th-large" class="svg-inline" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="icon-white" d="..."></path></svg> </span><span class="pl-2 menu-name">Dashboard</span> </a> </li> </span>

I attached a screenshot of the page with the Dashboard menu highligted in browser inspector (see b-nav-item-BSVN.png), and as a comparison, also a screenshot for the same page/menu when using BSV (b-nav-item-BSV.png).

The relevant code is in https://github.com/AudiovisualMetadataPlatform/amppd-ui/blob/AMP-3469_menuBVN/src/components/navigation/Sidebar.vue, line 19, with @click calling routeTo(menu), line 129. I put logs inside router.beforeEach https://github.com/AudiovisualMetadataPlatform/amppd-ui/blob/AMP-3469_menuBVN/src/router.js, line 452. I debug into the router and see that routing happens twice, first it tries to route to the proper page (/dashboard) when I click on Dashboard menu, but then it routes back to the original page, which is the homepage /. As a result, the page stays at the homepage. I wonder if this behavior is caused by the above extra property replace = "false".

Below is what shows on console:

routeTo()
Sidebar.vue:66 routing to menu
router.js:457 from:  {fullPath: '/', path: '/', query: {…}, hash: '', name: 'home', …} 
to:  {fullPath: '/dashboard', path: '/dashboard', query: {…}, hash: '', name: 'dashboard', …} 
next:  ƒ () {
        if (called++ === 1)
            warn(`The "next" callback was called more than once in one navigation guard when going from "${from.fullPath}" to "${to.fullPath}". It should be called ex…
router.js:458 currentUser:  {token: …}
router.js:471 validating user
base-service.js:49 BaseService: sending post to http://localhost:8200/rest/account/validate
router.js:457 from:  {fullPath: '/', path: '/', query: {…}, hash: '', name: 'home', …} 
to:  {fullPath: '/', path: '/', query: {…}, hash: '', name: 
![b-nav-item-BSV](https://github.com/user-attachments/assets/71e1ec45-8832-40d4-be35-82bbd00dd501)
![b-nav-item-BSVN](https://github.com/user-attachments/assets/fbafe1ed-5d0c-49a3-8ee9-f5a6739e5508)
'home', …} 
next:  ƒ () {
        if (called++ === 1)
            warn(`The "next" callback was called more than once in one navigation guard when going from "${from.fullPath}" to "${to.fullPath}". It should be called ex…
router.js:458 currentUser:  {token:  …}
router.js:461 router: No auth needed.
Sidebar.vue:77 resolvePermissions: is Admin Read-Unit
Sidebar.vue:77 resolvePermissions: is Admin Read-Supplement
Sidebar.vue:77 resolvePermissions: is Admin Read-Item
Sidebar.vue:77 resolvePermissions: is Admin Create-Batch
account-service.js:100 User authenticated: true
router.js:473 success = true
router.js:480 checking permission
router.js:486 router: initPermissions =   Proxy(Array) {}  isAdmin =  true
router.js:488 ampadmin can perform action Read-WorkflowResult

Due to the length, I will state the second issue in another discussion. Thanks a lot for any suggestions!