Vue-bootstrap 导航链接到“外部应用程序”答案

【问题标题】：Vue-bootstrap nav link to 'external application'Vue-bootstrap 导航链接到“外部应用程序”
【发布时间】：2019-09-22 23:01:03
【问题描述】：

我有一个应用程序，我决定使用vue-bootstrap 而不是bootstrap 来实现标签等附加功能。因为我已经在项目中有vue-bootstrap，所以我决定也将导航重写到其中。现在我有一个问题，导航中的链接指向正确的 URL，但是当我单击它们时，什么也没有发生。我怀疑 Vue 在内部控制了访问链接的请求。

我在 Latte 模板语言中有以下代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div>
            <b-nav n:if="$menu->hasVisibleItemsOnMenu()">
                {foreach $menu->getVisibleItemsOnMenu() as $itemsParent}
                    {if $itemsParent->hasVisibleItemsOnMenu() === false}
                        <b-nav-item n:attr="active => $itemsParent->isActive()">
                            <a href="{$itemsParent->getRealLink()}">{$itemsParent->getRealTitle()}</a>
                        </b-nav-item>
                    {else}
                        <b-nav-item-dropdown
                                text="{$itemsParent->getRealTitle()}"
                                extra-toggle-classes="nav-link-custom"
                                right
                        >
                            {foreach $itemsParent->getVisibleItemsOnMenu() as $item}
                                <b-dropdown-item n:attr="active => $item->isActive()" >
                                    <a href="{$item->getRealLink()}">{$item->getRealTitle()}</a>
                                </b-dropdown-item>
                            {/foreach}
                        </b-nav-item-dropdown>
                    {/if}
                {/foreach}
            </b-nav>
        </div>
    </div>
</nav>

下拉列表中的链接应将我重定向到链接中的页面/URL。现在，什么都没有发生。

Vue 设置在<head>

  <!-- Load required Bootstrap and BootstrapVue CSS -->
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

  <!-- Load polyfills to support older browsers -->
  <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
  <!-- Load Vue followed by BootstrapVue -->
  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

在页脚

  <script>
    window.app = new Vue({
      el: '#app',
    })
  </script>

【问题讨论】：

你能提供你的代码，网址吗？
代码就在这里，你还需要什么？我点击生成的链接是http://localhost:8080/league.front/
您是否收到一些控制台错误，您是如何更改组件（node_modules 文件夹等）的？我正在尝试复制
没有控制台错误，vue-bootstrap 设置添加到问题中。

标签： javascript vue.js bootstrap-4 vue-component navbar

【解决方案1】：

我想我明白了。 <b-nav-item> 组件有一个href property。将您的代码插入其中，它可以工作。

所以我删除了所有条件，只是克隆了项目。

window.app = new Vue({
  el: '#app',
})

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <title>My first BootstrapVue app</title>

  <!-- Required Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Required scripts -->
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>

<body>
  <!-- Our application root element -->
  <div id="app">
    <b-container>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div>
          <b-nav n:if="$menu->hasVisibleItemsOnMenu()">


            <b-nav-item href="https://google.com" n:attr="active => $itemsParent->isActive()">
              Google
            </b-nav-item>

            <b-nav-item href="https://bing.com" n:attr="active => $itemsParent->isActive()">
              Bing
            </b-nav-item>
            <b-nav-item href="https://yahoo.com" n:attr="active => $itemsParent->isActive()">
              Yahoo
            </b-nav-item>
            <b-nav-item-dropdown text="Dropdown" extra-toggle-classes="nav-link-custom" right>

              <b-dropdown-item href="https://google.com" n:attr="active => $item->isActive()">
                Google
              </b-dropdown-item>
              <b-dropdown-item href="https://bing.com" n:attr="active => $item->isActive()">
                Bing
              </b-dropdown-item>
              <b-dropdown-item href="https://yahoo.com" n:attr="active => $item->isActive()">
                Yahoo
              </b-dropdown-item>
            </b-nav-item-dropdown>

          </b-nav>
        </div>
      </nav>
    </b-container>
  </div>

</body>

</html>

您的代码中有一个额外的</div>，我认为这不会造成干扰。

如果没有正确的 CSS，很难说，但链接似乎可以正常工作。

【讨论】：

有效！之后你甚至不必在里面添加a 标签。