Hello everyone, I am Pai Daxing. Recently, I manually built a background management platform and named it " Radar-Solution " . During the development process, I compared other background solutions that have been formed and found that they all exist One commonality is that Layoutthere is a breadcrumb component in the head of the website. I feel that those are too serious, and there is no animation effect when switching, so I thought about making a breadcrumb with animation for fun.
dynamic breadcrumbs
breadcrumb component
What is a breadcrumb component:
Is a navigation aid in the user interface. It is a way for users to locate and move their position within a program or file.
Common breadcrumb navigation components are divided into two categories, namely:
- static breadcrumbs
- Dynamic Breadcrumbs
Let us first understand how these two breadcrumb components are implemented, and also have their advantages and disadvantages
static breadcrumbs
Refers to the corresponding breadcrumb navigation menu written in each page
advantage:
- The logic is simple, after writing one, the others can be pasted and copied directly
shortcoming:
- Every page needs to be written again
- The path structure of the page has changed and needs to be modified manually
- Difficult to maintain and expand
dynamic breadcrumbs
urlAutomatically generate a breadcrumb menu based on the current
advantage:
- Dynamic breadcrumbs will be calculated correctly no matter what happens to the path
shortcoming:
- It is slightly more complicated than the logic of static breadcrumbs
Then, we will use dynamic breadcrumbs to complete this requirement. At the beginning of coding, let us first analyze the requirements and divide the implementation steps, so as not to ensure clear logic during the implementation process
- Create a basic breadcrumb component
- Get routing data
- Render dynamic breadcrumbs based on data
ps: The code that appears below is used as
ElementUI
1. Create a basic breadcrumb component
The rendering effect is as follows:
Then the first step of static breadcrumbs has been completed, and then we need to move on this static component. It is not difficult to find from the above code that this component mainly contains two components part:
el-breadcrumb: container of wrapping natureel-breadcrumb-item: Separate navigation item
If we want to complete the dynamic effect, we only need to traverseel-breadcrumb-itemthe loop based on the dynamic data, then we only need to consider the data if the data is obtained!
2. Get routing data
For obtaining routing data, we only need to monitor the routing to obtain the data. Here Vuewe provide a specific method for obtaining the data. We only need to vue.$route.matchedobtain the data that matches the given routing address. Friends who don’t know very well, I will send you here directly , and here I only introduce the implementation method.
Listen to the change of the route, we can get the specific route address
Render dynamic breadcrumbs based on data
el-breadcrumb-itemNow that the data has been obtained, there is no need for me to say that everyone should know what to do. It is an v-foroperation when the breadcrumbs are not paying attention. The
rendering effect is as follows:
4. Realize the animation effect
The basic breadcrumb navigation bar has been completed, but there is no animation effect, so our task is not completed yet, continue to add animation effects to the existing breadcrumbs, in fact, Vue has also provided us with a method to add animation, Use transitionto wrap the part we need to add animation to. I won’t introduce the concept here. If you don’t understand it yet, I’ll send you there . Next, just use transitionto wrap our breadcrumbs!
Then add specific animation styles to it and you're done!
It's over, let's take a look at the final rendering effect!
Finally, we achieved the original ideal result. For me, this case not only consolidated Vuesome of my command operations, but also allowed me to have more thinking and thinking processes.
Finish
Here are only some cases about breadcrumbs, all the codes can be obtained from GitHub, the project is still in the process of development...
GitHub address: https://github.com/pdxjie/vue-admin-radar