Issue with b-nav-item #2339
-
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: 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:
Due to the length, I will state the second issue in another discussion. Thanks a lot for any suggestions! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
Beta Was this translation helpful? Give feedback.
-
the |
Beta Was this translation helpful? Give feedback.
the
replace="false"
doen't effect the element. You are using your own routeTo function so you might want to start looking the problem from there. Propably add .prevent to the @click handler for vue to ignore the underlying a tag link, which causes popState event and triggers navigation.