Html Question posted in
Some basic documentation can be found here.

Html – How do I display different elements depending on which tab is active in my Navbar

Ok so basically I am using vue.js to build a single page application and my Issue is that I have no idea on how to handle a navbar.

Scenario: I have 3 tabs in my navbar and depending on which tab get’s pressed on a portion of my website changes to show elements relevant to that tab. Important is that it’s a single page application so I can’t just use links and call a new page. I want everything to be done on that one page.

How would I go on about doing this? A simple example would suffice. I will expand on it as I need.

Nothing I tried really got me anywhere and googling didn’t give me an answer.

Tags:

2

Answers


  1. 0

    I think you can use v-if v-else in vuejs to show component when clicking it on navbar, or you can show all thing on your page and when you clicking navbar the screen scroll to component what you want.

    Login or Signup to reply.
  2. 0

    1. If you are always replacing the same area with different content based on active NavLink, you can use Nested Routes with vue-router. Learn more about how nested routes wrok

    2. If different parts of UI changes based on active Navlink you can use a global composable or a pinia store to keep track of active link. Then show/hide UI with v-if where needed. Pinia

    If you are still struggling let me know, I will try to create simple example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search