D
D
Denis2019-08-14 01:57:05
Vue.js
Denis, 2019-08-14 01:57:05

How to set up routing for the main page with tabs?

On the main page there is a block with tabs, when switching them, #tab-name-1 is added to the url.
In this case, the active class in the menu disappears from the Main menu item, because this item has the property exact.
How to configure routing so that when switching tabs, the Home menu item does not lose the active class?
At url site.com Main has the class active, and at site.com/#tab-name-1 it loses this class.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Eugene, 2019-08-16
@phoenixbk

I made a dynamic link at the router-link (I really have a query string, but I think # can be done in the same way):
And query already filled depending on the current page. If "/", then we substitute the query string from the address. If another page, then the query is empty. Thus, no matter how the query string is updated on the main link, it will always be active.
PS I met somewhere that it seems like in the new version it will be possible to configure the router-link so that it ignores the query string and so on when determining the activity of the link. Then you can do without crutches.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question