element导航页面搭建

Element UI提供了`el-menu`和`el-submenu`组件来构建导航菜单。以下是基本的步骤来搭建一个Element导航页面：

1. 引入依赖：首先，确保已经在项目中安装并引入了Element UI，包括`el-menu`组件。

   <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.0/dist/index.js"></script>

2. 创建基础结构：在HTML中创建一个包含`el-menu`的容器。

   <div id="app">
     <el-menu :default-active="$route.path" class="el-menu-demo">
       <!-- 菜单项内容将会放在这里 -->
     </el-menu>
   </div>

3. 定义菜单项：在`el-menu`标签内添加`el-menu-item`或`el-submenu`元素，代表一级菜单和二级菜单。

   <el-menu-item index="/">首页</el-menu-item>
   <el-submenu index="1">
     <template slot="title">分类</template>
     <el-menu-item index="1-1">分类1</el-menu-item>
     <el-menu-item index="1-2">分类2</el-menu-item>
   </el-submenu>

4. 数据驱动：如果你的菜单项需要根据业务数据动态生成，可以使用Vue的数据绑定和路由监听。例如，利用`v-for`遍历数组，或者监听`$route`变化更新菜单状态。

   data() {
     return {
       menus: [
         { name: '首页', path: '/' },
         { name: '分类', children: [{ name: '分类1' }, { name: '分类2' }] }
       ]
     }
   },
   watch: {
     '$route': () => {
       this.$refs.menu.defaultActive = this.$route.path;
     }
   }

5. 渲染菜单：在Vue实例的`mounted`生命周期钩子中，使用`ref`属性绑定`el-menu`，以便后续操作。

   mounted() {
     this.$refs.menu.renderSubmenu();
   }

现在你已经创建了一个基本的Element UI导航页面。