写一个类似于elementui的侧边栏导航，可以点击，数据用本地模拟，其中一级菜单包括首页，个人中心，用户管理，菜品分类管理，菜品信息管理，餐桌管理菜品订单管理，系统管理等，一级分类菜品分类管理里边包含菜品分类，菜品信息管理包含菜品信息,我还需要他具有路由功能，点击对应模块跳转

好的，我可以为您提供一个 Vue 的侧边栏导航组件示例，您可以根据自己的需求进行修改：

<template>
  <div class="sidebar">
    <el-menu class="el-menu-vertical-demo" :default-openeds="defaultOpeneds" router>
      <el-menu-item index="/">首页</el-menu-item>
      <el-submenu index="personal">
        <template slot="title">
          <i class="el-icon-user"></i>个人中心
        </template>
        <el-menu-item index="/personal/info">个人信息</el-menu-item>
        <el-menu-item index="/personal/security">安全设置</el-menu-item>
      </el-submenu>
      <el-submenu index="user">
        <template slot="title">
          <i class="el-icon-user-solid"></i>用户管理
        </template>
        <el-menu-item index="/user/list">用户列表</el-menu-item>
        <el-menu-item index="/user/add">添加用户</el-menu-item>
      </el-submenu>
      <el-submenu index="food">
        <template slot="title">
          <i class="el-icon-food"></i>菜品管理
        </template>
        <el-submenu index="category">
          <template slot="title">菜品分类管理</template>
          <el-menu-item index="/food/category/list">分类列表</el-menu-item>
          <el-menu-item index="/food/category/add">添加分类</el-menu-item>
        </el-submenu>
        <el-submenu index="info">
          <template slot="title">菜品信息管理</template>
          <el-menu-item index="/food/info/list">菜品列表</el-menu-item>
          <el-menu-item index="/food/info/add">添加菜品</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="table">
        <template slot="title">
          <i class="el-icon-menu"></i>餐桌管理
        </template>
        <el-menu-item index="/table/list">餐桌列表</el-menu-item>
        <el-menu-item index="/table/add">添加餐桌</el-menu-item>
      </el-submenu>
      <el-submenu index="order">
        <template slot="title">
          <i class="el-icon-sold-out"></i>订单管理
        </template>
        <el-menu-item index="/order/list">订单列表</el-menu-item>
        <el-menu-item index="/order/add">添加订单</el-menu-item>
      </el-submenu>
      <el-submenu index="system">
        <template slot="title">
          <i class="el-icon-setting"></i>系统管理
        </template>
        <el-menu-item index="/system/config">系统配置</el-menu-item>
        <el-menu-item index="/system/log">系统日志</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultOpeneds: ['personal', 'user', 'food', 'table', 'order', 'system']
    }
  }
}
</script>

<style>
.sidebar {
  background-color: #001529;
  color: #fff;
  height: 100%;
  position: relative;
}
</style>

这是一个基于 ElementUI 的侧边栏导航组件示例，其中使用了 ElMenu 和 ElSubmenu 组件来实现一级菜单和二级菜单，使用 router 属性开启了路由功能。您可以根据自己的需求来修改菜单项的名称、图标和路由。