vue admin-template 怎么实现静态路由的左侧菜单导航

在 Vue Admin-Template 中，静态路由的左侧菜单导航可以通过以下步骤来实现：

1. 在 `src/router/index.js` 文件中定义静态路由，例如：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

2. 在 `src/layout/components/Sidebar/index.vue` 文件中编写左侧菜单导航的代码，例如：

<template>
  <div class="sidebar">
    <el-menu :default-openeds="openeds" :default-active="active" class="el-menu-vertical-demo" :collapse="collapse">
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">Home</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <i class="el-icon-menu"></i>
        <span slot="title">About</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      openeds: [],
      active: '/',
      collapse: false
    }
  }
}
</script>

3. 在 `src/layout/AppMain.vue` 文件中将路由视图组件渲染到页面中，例如：

<template>
  <div class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

这样，当用户访问对应的路由时，左侧菜单导航会高亮显示当前路由，并展开对应的菜单项。