VueJS 在路线更改时关闭汉堡菜单 [英] VueJS close Hamburger Menu on Route Change
问题描述
我有一个简单的 VueJS 应用程序，带有来自 Bootstrap 的导航栏:
<header id="header"><nav class="navbar mynavbar navbar-fixed-top"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="logo" href="index.html"><img src="images/logo.png" alt=""></a><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><router-link to="/home"><a>Home</a></router-link></li><li><router-link to="/about"><a>关于我们</a></router-link></li></div><!--/.navbar-collapse --></div><!--/.container --></nav></标题>
现在我想确保当我更改路线时，Bootstrap 菜单会关闭.实现这一目标的最佳方法是什么?
您无需为每个 router-link 添加事件处理程序，而只需查看 $route 属性更改:
I have a simple VueJS App with a Navigation Bar from Bootstrap:
<template>
<header id="header">
<nav class="navbar mynavbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><router-link to="/home"><a>Home</a></router-link></li>
<li><router-link to="/about"><a>About Us</a></router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
</template>
Now I want to ensure that when I change the route, the Bootstrap Menu gets closed. What is the best way to accomplish this?
Instead of adding event handlers to every router-link, you can simply watch the $route property for changes:
<script>
export default {
watch: {
'$route' () {
$('#navbar-collapse').collapse('hide');
}
}
}
</script>
这篇关于VueJS 在路线更改时关闭汉堡菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
