Vue Element是一個常用的開源UI框架，包括多個組件，使得開發者的工作更加方便快捷。其中，導航是開發過程中必不可少的部分，本文將介紹如何使用Vue Element的導航組件。

要使用Vue Element的導航組件，首先需要安裝Vue Element庫。在腳手架工具中使用npm命令安裝：

npm install element-ui --save

安裝完成之后，在main.js中引入Vue Element：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)

在引入Vue Element之后，在需要使用導航組件的頁面中引入el-menu、el-menu-item和el-submenu組件，并定義數據源，綁定事件：

<el-menu
default-active="1"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@select="handleSelect"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>
<span>消息管理</span>
</template>
<el-menu-item-group title="分組一">
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三（禁用）</span>
</el-menu-item>
</el-menu>

這里我們使用了el-menu、el-menu-item 和el-submenu三個組件，el-menu是最外層的菜單，el-menu-item就是菜單項，el-submenu是一個可以折疊展開的二級菜單。這里為了展示不同展開方式，我們使用了垂直菜單和水平菜單兩種樣式。

要實現導航的切換操作，可以使用@select事件來完成。這里只需在methods中定義handleSelect方法即可：

methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}

當然，這里只是簡單的演示，實際中，handleSelect方法可以實現頁面跳轉等更復雜的操作。