Vue-bootstrap nav ссылка на «внешнее приложение» - PullRequest
Новая
       14

Vue-bootstrap nav ссылка на «внешнее приложение»

2 голосов
/ 04 мая 2019

У меня есть приложение, которое я решил использовать vue-bootstrap вместо bootstrap для дополнительных функций, таких как tabs . Поскольку у меня уже есть vue-bootstrap в проекте, я решил также переписать в него навигацию. Прямо сейчас у меня проблема, когда ссылки в навигации указывают на правильный URL, однако когда я нажимаю на них, ничего не происходит. Я подозреваю, что Вью внутренне контролирует запрос на переход по ссылке.

У меня есть следующий код на языке шаблонов латте: 

<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>

1 Ответ

2 голосов
/ 04 мая 2019

Я думаю, что понял. Компонент <b-nav-item> имеет свойство href . Вставив в него свой код, все работает.

Итак, я убрал все условные выражения и просто клонировал элементы. 

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, но ссылки вроде бы работают.

...