General article address:
Vue. Js base will not? — This article is enough
Vue whole family barrel Webpack Git Axios Element- UI
4. Home page layout and function realization
4.1 Basic home page layout
1. Use the Element component in the home.vue component page layout container directly:
First register the component in element.js
Write structure and style in home.vue
Effect:
4.2 Beautify the Header area
Using Flex layout:
This is a little bit easier and I’m not going to write it in detail
End result:
4.3 Implement the basic structure of the navigation bar
Effect:
4.3 Add token authentication through axios interceptor
Get menu data through the interface
4.4 Obtaining data on the left menu Bar
View the interface properties in the interface documentation as follows
Childern: Secondary menu.
Define the life cycle function:
Get all menus:
Render left menu data:
4.5 Render the left menu through a double-layer for loop
The outer for loop renders the first level menu
Dynamically bound id dynamically bound key, V-for loop item,
Dynamically populate content in a text span
Second layer loop second level menu:
Circle the item. The children
4.6 Set the color of the selected font and add the category icon
Change the default color yellow to blue,
Change the default icon
The first level icon is not found in Element-UI, use ali icon library to find, define icon object in the data, and then dynamically fill in:
Next dynamically loop rendering into the structure:
Add text and icon spacing:
End result:
4.7 Solve the problem that only one menu bar and border can be opened at a time
Use the element-UI attributes:
The right side is highlighted because there is a border by default, which can be removed:
4.8 Achieve the effect of folding and expanding the sidebar
1, add fold button, style
Bind button click events:
Define methods in Mathods:
Elder-ui provides: collapse methods,
Define the isCollapse method to true to be called when the button is clicked.
2. The default animation is ugly, and elemental-UI has an attribute to turn off animation:
Dynamic binding:
3, the hidden sidebar background color remains unchanged, because it was written by width
Solutions:
Dynamic assignment, default 200px, 64px when clicked
Then the corresponding method:
Use ternary expressions to judge:
4.9 Route Redirection on the Home Page (Child Routes)
We also implemented redirection in the previous section,
The requirement is to implement the Welcome component in the Home page
1. Create a welcome page in Component and write! [insert picture description here](Img – blog. Csdnimg. Cn / 20210509143…)
Importing components in a route:
Implement Welcome as a child of home:
Redirect Attribute redirects
Place a route placeholder in the home body
Display child components in placeholder position:
Final effect:
4.10 Realize the transformation of the sidebar routing link
Click different secondary menus to realize the jump display of sub-components:
Using the Router attribute in element:
Define attributes: Router = “true” can be simply shortened to true
