Vue implements nested routing method example

1. Nested routing is also called sub-routing. In practical applications, it is usually composed of multiple layers of nested components. (It is actually just a nesting operation, which is quite similar to the view jump path of the backend):

2. Create a user information component and create a view component named Profile.vue in the views/user directory:

Profile.vue

<template>
  <h1>Xianyu_Turnover1</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

3. Create a view component named List.vue in the views/user directory in the user list component:

List.vue

<template>
  <h1>Xianyu_turnaround2</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

4. Modify the home page view. We modify the Main.vue view component. The ElementUI layout container component is used here. The code is as follows:

Main.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>User Management</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--Where to insert-->
                  <router-link to="/user/profile">Personal Information</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--Where to insert-->
                  <router-link to="/user/list">User list</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>Content Management</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">Category Management</el-menu-item>
                <el-menu-item index="2-2">Content List</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>Personal Information</el-dropdown-item>
                <el-dropdown-item>Log out</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--Show the view here-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

5. Configure nested routing. Modify the index.js routing configuration file in the router directory, and use children to put it into main to write the submodule. The code is as follows:

index.js

//Import vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//Import componentsimport Main from "../views/Main";
import Login from "../views/Login";
//Import submoduleimport UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

//Use Vue.use(VueRouter);
//Export export default new VueRouter({
  routes: [
    {
      //Login page path: '/main',
      component: Main,
      // Write to submodule children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },
    //front page{
      path: '/login',
      component: Login

    },
  ]
})

6. Operation results:

7. The project structure is:

8. Then let's add a function:

Just add this code to Main.vue:

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>Xianyu_turnaround management</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">Xianyu_Fanshe 4</el-menu-item>
              <el-menu-item index="3-2">Xianyu_Fanshe5</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

Summarize

This is the end of this article about Vue's implementation of route nesting. For more relevant Vue route nesting content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: