HEGII.ss.mes.dashboard/wwwroot/app/common/navbar.js

function navbar(props) {
    return {
        $template: `
      <nav @vue:mounted="getDashboardList" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" aria-label="Offcanvas navbar large">
          <div class="container-fluid">
              <a class="navbar-brand" href="/app/index.html"><img src="/app/images/dongke-logo.png" alt="Logo" height="30" class="d-inline-block align-text-top"> 东科软件</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
                  <div class="offcanvas-header">
                      <h5 class="offcanvas-title" id="offcanvasNavbar2Label">电子看板目录</h5>
                      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                  </div>
                  <div class="offcanvas-body">
                      <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                          <li class="nav-item">
                              <a class="nav-link active" aria-current="page" href="/app/index.html">首页</a>
                          </li>
                          <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                  设备部
                              </a>
                              <ul class="dropdown-menu">
                                  <li><a class="dropdown-item" v-for="(item,index) in dashboardList.device" :key="index" :href="item.url" >{{item.name}}</a></li>
                              </ul>
                          </li>
                          <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                  总经办
                              </a>
                              <ul class="dropdown-menu">
                                  <li><a class="dropdown-item" v-for="(item,index) in dashboardList.manage" :key="index" :href="item.url" >{{item.name}}</a></li>
                              </ul>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </nav>
      <div class="pt-5">
      </div>
        `,
        //设备看板列表
        dashboardList: [],
        //获取数据方法
        getDashboardList() {
            let self = this;
            axios.get('/app/api/getDashboardList.ashx')
                .then(function (response) {
                    self.dashboardList = response.data;
                })
                .catch(function (error) {

                });
        }
    }
}