Vue writes footer navigation, click which to change color and route jump (the role of router-link-active).
As shown in the figure above, 4 route jump options are created.
When I switch the four routing options of "Home", "Lala", "Discover" and "My", the text and icon change from black to red.
The following figure shows the layout (html):
router-link: where tag='div' indicates that router-link is a div tag
CSS:
router-link-active is a self-contained attribute of vue, which indicates the state when router-link is activated and selected, which can be realized Switch to change color .
The above completes the requirements of this function! Is it very simple.
But the understanding of router-link-active is not very deep, it doesn't matter, let's talk about its function in detail below:
The component supports the user to navigate (click) in applications with routing functions.
Specify the target address through the to attribute, which will render as a tag with the correct link by default.
You can generate other tags by configuring the tag attribute.
In addition, when the target route is successfully activated, the link element automatically sets a CSS class name indicating activation, which is router-link-active, and we can add color or background to the a tag when the a tag is clicked
If you think the name router-link-active is too long, you can use main.js,
let router=new VueRouter({
router-link-active：’active’
})
Routing redirection: After all the
above settings are completed, you are basically done, but because the root path is set as shown in the figure below, the
index path cannot be activated in this way, so just entering the root path does not make the "home" navigation red, so here it is necessary Use routing redirection (redirect).
Redirect the route of the root path, as shown in the following figure: If you are
directed to the /index path, you can successfully activate the home page path and make the "Home" navigation red.
