imanmalekian31/vue-bottom-navigation

Changing the active button dinamically, based on the route

Closed this issue · 9 comments

alex-yplabs commented

Hey!

I am trying to use this navigation component in my product (Vue 2 version). I really like it - great job!

There are several parts in the app where I can go to different pages by clicking different elements. I would like to be able to change the active button from the navigation dynamically based on the route (for example - I have orders and I have some kind of results under each order -> I would like to be able to make the navigation item order to remain active both when I am on the main page (/orders) + when I am on sub-pages (/result); another example would be - I am on the /orders page and I am going on the homepage by clicking the logo/a button -> I would like the home navigation button to be active, even if I didn't specifically clicked on it)

I have tried to do this by changing the v-model (selected param in your examples) of the navigation component (changing the active number based on the route) but this doesn't work well -> because if I change the number and then I try to go to another route (by pressing a button) - I am being redirected automatically to the route under the navigation item identified by the number I have set dynamically.

Can you help me with a solution to this?

Thanks!

alex-yplabs commented

Hey @imanmalekian31 ! is there any update on this? Thanks a lot

imanmalekian31 commented

Hi buddy,
I've done that but I should completely test it, I guess it will be prepared Friday.

  • 🚀1
  • 👀1
imanmalekian31 commented

Hi,
I've just released a new version (2.6.0).
I hope it works for you.

imanmalekian31 commented

Hi @alx-bento,
You can use it like the previous version. I only added support for watching the router to update the state.
You don't need to update v-model because it will completely update when the route is changed, Also, if you use the initial route, It will support by package, and you don't need to change it by yourself.

alex-yplabs commented

Hey @imanmalekian31! And what if I want to add specific routes to make the same button to be active? So for example I have /results and /orders - what if I want both results and orders to activate the same button? Can I set somehow what other paths to be taken into consideration for that buttons active state?

Thanks!

imanmalekian31 commented

If you define them as child of an item, it's possible like this:

 options: [
        {
          id: 1,
          icon: "fas fa-home",
          title: "Home",
          child: [
              { id: 101, icon: "fas fa-gifts", title: "Order" , path: "/order" }, 
              { id: 102, icon: "fas fa-gifts", title: "Result" , path: "/result" }
          ],
        },
      ]
alex-yplabs commented

Hey @imanmalekian31 !

The above example still doesn't solve my issue.

Let me re-phrase:

  • I have 3 different pages -> /order, /result and /home
  • /result doesn't have the main button on the navbar (it's not a main nav item)
  • /result is not a child of any page and doesn't need to be. it's just a separate route that is accessible from different places.
  • /home and /order have a main button on the navbar (they are the main items on the nav)
  • /result can be accessed from 2 pages - from the /home page and from the /orders page
    => I want that all the time /result pages are being accessed, the /order navbar item to be set as a primary button/highlighted
    => basically, I want to be able to programmatically set the "active" state of a button based on totally different routes. I want to be able to adjust the "active style" rules of the nav buttons -> to be active when it's being pressed or the main URL of the button is being accessed => or to be active also on other custom routes set by me.

Do you think this is doable?

Thanks!

imanmalekian31 commented

Hi,
I think it's not possible.