081.VueRouter-嵌套路由

VueRouter 嵌套路由

什麼是嵌套路由

嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的元件組合而成。同樣地，URL 中各段動态路徑也按某種結構對應嵌套的各層元件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
           

建立嵌套視圖元件

使用者資訊元件

在

views/user

目錄下建立一個名為

Profile.vue

的視圖元件；該元件在目前章節無任何作用，主要用于展示嵌套效果；

<template>
    <div>
      個人資訊
    </div>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>
           

使用者清單元件

在

views/user

目錄下建立一個名為

List.vue

的視圖元件；該元件在目前章節無任何作用，主要用于展示嵌套效果；

<template>
    <div>
      使用者清單
    </div>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>
           

配置嵌套路由

修改

router

目錄下的

index.js

路由配置檔案，代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from '../views/Main'

// 用于嵌套的路由元件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登入頁
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首頁
      path: '/main',
      name: 'Main',
      component: Main,
      // 配置嵌套路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    }
  ]
});
           

說明：主要在路由配置中增加了

children

數組配置，用于在該元件下設定嵌套路由

修改首頁視圖

接着上一節的代碼，我們修改

Main.vue

視圖元件，此處使用了 ElementUI 布局容器元件，代碼如下：

<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-dropdown-item>
                <el-dropdown-item>登出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>Lusifer</span>
          </el-header>

          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped >
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
           

說明：

• 在

  <el-main>

  元素中配置了

  <router-view />

  用于展示嵌套路由
• 主要使用

  <router-link to="/user/profile">個人資訊</router-link>

  展示嵌套路由内容

效果示範