springboot+vue动态导航栏

实现步骤：

1. 在Vue中定义动态导航栏的数据结构，包括菜单项的名称、路由路径、子菜单等。

2. 在Vue组件中使用v-for循环渲染动态导航栏，使用router-link组件实现路由跳转。

3. 在Spring Boot中编写Controller或RestController，返回动态导航栏所需的数据结构。

4. 在前端使用axios或fetch等工具，发送异步请求获取动态导航栏数据，在mounted生命周期钩子函数中初始化动态导航栏的数据。

5. 根据用户权限或其他条件，动态生成导航栏的菜单项及子菜单。

6. 根据当前路由路径，动态设置导航栏菜单项的选中状态。

示例代码如下：

Vue组件部分：

<template>
  <div class="nav">
    <ul>
      <li v-for="(menu, index) in menus" :key="menu.id">
        <router-link :to="menu.path" :class="{active: isActive(menu)}">{{menu.name}}</router-link>
        <ul v-if="menu.children">
          <li v-for="(child, i) in menu.children" :key="child.id">
            <router-link :to="child.path">{{child.name}}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      menus: []
    }
  },
  methods: {
    isActive (menu) {
      return this.$route.path === menu.path
    }
  },
  mounted () {
    axios.get('/api/menus').then(res => {
      this.menus = res.data
    })
  }
}
</script>

<style>
.nav {
  background-color: #f5f5f5;
  padding: 10px;
}
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li {
  display: inline-block;
  margin-right: 10px;
}
.nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  padding: 0;
  margin: 0;
}
.nav li:hover > ul {
  display: block;
}
.nav li ul li {
  display: block;
  margin: 0;
}
.nav li ul li:hover {
  background-color: #f5f5f5;
}
.nav .active {
  color: red;
}
</style>

Spring Boot控制器部分：

@RestController
@RequestMapping("/api")
public class MenuController {
    @GetMapping("/menus")
    public List<Menu> getMenus() {
        // 根据用户权限或其他条件，动态生成菜单项及子菜单
        List<Menu> menus = new ArrayList<>();
        Menu menu1 = new Menu(1L, "首页", "/home");
        Menu menu2 = new Menu(2L, "管理中心", "/admin");
        Menu menu3 = new Menu(3L, "用户中心", "/user");
        List<Menu> children = new ArrayList<>();
        children.add(new Menu(4L, "个人信息", "/user/info"));
        children.add(new Menu(5L, "订单管理", "/user/order"));
        menu3.setChildren(children);
        menus.add(menu1);
        menus.add(menu2);
        menus.add(menu3);
        return menus;
    }
}

class Menu {
    private Long id;
    private String name;
    private String path;
    private List<Menu> children;
    // getter和setter省略
}