Vue實現路由巢狀的方法例項

阿新 • • 發佈：2021-11-22

1、巢狀路由又稱子路由，在實際應用中，通常由多層巢狀的元件組合而成。（其實就是套娃操作罷了，跟後端的檢視跳轉路徑蠻像的）：

Vue實現路由巢狀的方法例項

2、建立使用者資訊元件，在 viewrGjhFNvDVs/user 目錄下建立一個名為 Profile. 的檢視元件：

Profile.vue

<template>
  <h1>鹹魚_翻身1</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

3、在使用者列表元件在 views/user 目錄下建立一個名為 List.vue 的檢視元件：

List.vue

<template>
  <h1>鹹魚_翻身2</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

4、修改首頁檢視，我們修改 Main.vue 檢視元件，此處使用了 ElementUI 佈局容器元件，程式碼如下：

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>使用者管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <router-link to="/user/profile">個人資訊</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/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>內容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內容列表</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>個人資訊</el-drrGjhFNvDV 
opdown-item>
                <el-dropdown-item>退出登入</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在這裡展示檢視-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="s">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

5、配置巢狀路由修改 router 目錄下的 index. 路由配置檔案，使用children放入main中寫入子模組，程式碼如下：

index.js

//匯入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//匯入元件
import Main from "../views/Main";
import Login from "../views/Login";
//匯入子模組
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(VueRouter);
//匯出
export default new VueRouter({
  routes: [
    {
      //登入頁
      path: '/main',componentwww.cppcns.com: Main,//  寫入子模組
      children: [
        {
          path: '/user/profile',component: UserProfile,},{
          path: '/user/list',component: UserList,]
    },//首頁
    {
      path: '/login',component: Login

    },]
})

6、執行結果：

Vue實現路由巢狀的方法例項

7、專案結構為：

Vue實現路由巢狀的方法例項

8、那麼我們加一個功能呢：

Main.vue中加入這段程式碼即可：

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>鹹魚_翻身管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">鹹魚_翻身4</el-menu-item>
              <el-menu-item index="3-2">鹹魚_翻身5</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

Vue實現路由巢狀的方法例項