javascript - 下拉菜单中导航栏中的 Vue Router-Link 不起作用

Question

我对 Vue 路由器的引导程序的下拉菜单有疑问。不知何故，单击它时下拉列表不会展开。我目前正在研究 Vuejs 并尝试创建一个导航栏，其中包含来自引导程序的下拉菜单。

我的应用程序.vue：

<template>
  <div>
    <!-- Nav bar -->
    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container">
        <ul class="nav navbar-nav mr-auto" >
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Event Actions
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <router-link class="dropdown-item" to="/CreatEvent">Create an event</router-link>
              <router-link class="dropdown-item" to="/ViewEvent">View events</router-link>
              <router-link class="dropdown-item" to="/EditEvent">Update an event</router-link>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <!-- Router view -->
    <div class="container mt-5">
        <router-view></router-view>
    </div>
  </div>
</template>

标签： javascripthtmlcssvue.jsvue-router