如何在 vuejs 中从菜单中单击动态路由时从 li 中获取值？

Question

**暂时我为每个 li 创建了一个组件。 我需要这是动态的。 这需要大量时间来加载。 我不知道该怎么做**

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
           ....        
          <div class="category">
            <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>
              <ul class="dropdown-menu megamenu">
                  <div class="row">
                  <li class="col-md-3 dropdown-item">
            
                  <li class="col-md-3 dropdown-item">
                      <ul>
                          <li class="dropdown-header">Boys</li>
                          <li class="disabled"><li><router-link to="Pajama_kurta">Pajama kurta</router-link>
                          <li class="disabled"><li><router-link to="Track_pants">Track pants</router-link>
                          <li class="disabled"><li><router-link to="Inner_Wears">Inner Wears</router-link>
                          <li class="divider"></li>
                          <li class="dropdown-header">Home Essentials</li>
                          <li class="disabled"><li><router-link to="Kitchen_appliances">Kitchen appliances</router-link></li>
                          <li class="disabled"><li><router-link to="Doormats">Doormats</router-link></li>
                          <li class="disabled"><li><router-link to="Bedsheets">Bedsheets</router-link></li>
                      </ul>
                  </li>
                  <li class="col-md-3 dropdown-item">
                      <ul>
                          <li class="dropdown-header">Girls</li>
                          <li class="disabled"><li><router-link to="Frocks_party_wear">Frocks party wear</router-link></li>
                          <li class="disabled"><li><router-link to="Cotton_frocks">Cotton frocks</router-link></li>
                          <li class="disabled"><li><router-link to="Summer_collections">Summer collections</router-link></li>
                          <li class="disabled"><li><router-link to="Inner_wear">Inner wear</router-link></li>
                      </ul>
                  </li>
                  </div>
                  </ul>
          </li>
          </div>
          .......
</nav>

Answer 1

我今天实际上正在做类似的事情（我认为）。

如果您还没有，请将li元素包装在父div中并为其添加点击侦听器：

<div @click="handleClicks($event)">
    <li></li>
    <li></li>
    <li></li>
    ...
</div>

现在，在方法中，添加一个handleClicks() function：

methods: {
    handleClicks(click) {
      if (click.target.tagName == "LI") { //Check if clicked element is a <li>
        let value = click.target.value    //Get li's value
        router.push('name of view you want to navigate to') //Navigate to different page. Also note that the router must be imported to use it.
      }
    }
  }

如果您还有其他问题，请告诉我