What is the method of implementing routing nesting in Vue
In this issue, Xiaobian will bring you about Vue's method of implementing routing nesting. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.
1. Nested routing, also known as sub-routing, is usually composed of multiple nested components in practical applications. (In fact, it is just a doll operation, which is quite similar to the view jump path at the back end):
2. Create a user information component, and create a view component named Profile.vue under the views/user directory:
Profile.vue
1 export default { name: "UserList" }
3. Create a view component named List.vue in the user list component under the views/user directory:
List.vue
2 export default { name: "UserList" }
4. Modify the home page view. We modify the Main.vue view component, where the ElementUI layout container component is used. The code is as follows:
Main.vue
user management personal information user list content management classification management content list personal information log out export default { name: "Main" } .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; }
5. Configure nested routing Modify the index.js routing configuration file under the router directory, and use children to write submodules in the main, the code is as follows:
index.js
//import vueVue from 'vue';import VueRouter from 'vue-router';//import components import Main from "../ views/Main";import Login from "../ views/Login";//import submodules import UserList from "../ views/user/List";import UserProfile from "../ views/user/Profile";//use Vue.use(VueRouter);//export default new VueRouter({ routes: [ { //Login page path: '/main', component: Main, //write submodule children: [ { path: '/user/profile', component: UserProfile, }, { path: '/user/list', component: UserList, }, ] }, //Home { path: '/login', component: Login }, ]})
6. Operation results:
7. Project structure:
8. Then we add a function:
Add this code to Main.vue:
Salted Fish_Turn Over Management Salted Fish_Turn Over 4 Salted Fish_Turn Over 5
The above is what Vue's method of implementing routing nesting shared by Xiaobian for everyone is. If there is a similar doubt, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.
