Pat*_*uch 4 javascript navbar vue.js bootstrap-4 vue-component
vue-bootstrap我有一个应用程序，我决定仅使用它来添加选项卡bootstrap等功能。由于我已经在该项目中，所以我决定也将导航重写到其中。现在我遇到一个问题，导航中的链接指向正确的 URL，但是当我单击它们时，没有任何反应。我怀疑 Vue 在内部控制了访问链接的请求。vue-bootstrap
我有以下 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。现在，什么也没有发生。
<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>
我想我明白了。该<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，很难说，但链接似乎有效。
| 归档时间： |
|
| 查看次数： |
1813 次 |
| 最近记录： |