How to implement navigation with ElementUI in vue-router

Below I will share with you an example of vue-router working with ElementUI to implement navigation. It has a good reference value and I hope it will be helpful to everyone.

Routing is indispensable in every project. I recently learned to use vue-router and ElementUI to implement a navigation bar. I encountered a problem during the learning process: after clicking refresh on the browser, the page stayed at The original location, but the navigation is the first one by default.

Since I have not been exposed to the front-end for a long time, I am not very clear about the concept of routing. After writing according to the document, I have no idea how to start. I asked my colleagues for advice. The solution of my colleagues is to use vuex management, but vuex I haven't been exposed to it yet, so this problem has been put on hold. I was studying at home this weekend and accidentally found out that I could use $route.path to set the default selected navigation. However, after setting it, it had no effect. When refreshing, the page still stays at the original position, and the navigation But none of them were selected, and I couldn't find the answer after searching the information for a long time. Later, I compared it with an example on the Internet and found that a binding symbol needs to be added in front of

default-active="$route.path"

, as follows:

:default-active="$route.path"

So After setting up, the navigation and page can be changed at the same time.

Please look here for the complete navigation code:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed interpretation of the use of this.$emit in vue.js

How to implement passwords in vue Show hide switching function

How to use parent component to call child component events in Vue

The above is the detailed content of How to implement navigation with ElementUI in vue-router. For more information, please follow other related articles on the PHP Chinese website!