我是 VueJs 的新学生,我想在其中制作一个菜单和二级菜单。 我想使用 Jquery-MetisMenu,因此下载了它,将其放在我的 Index.html 上,然后我为菜单创建了一个路由器 View 。
这是我的 Menu.vue
<template>
<div class="app">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li>
<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label"> Here First Level </span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="#"> Here Second Level </a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</template>
Routes.js
import ContentTest from './ContentTest.vue'
import Menu from './Menu.vue'
const routes = [
//{path: '/login', component: LoginView },
{
path: '/Menu',
component: Menu,
children: [
{
path: '/Menu/ContentTest',
component: ContentTest,
name: 'ContentTest 1'
}]
}]
export default routes
索引正文.Html
<body>
<!-- Main View -->
<div id="container">
<div id="wrapper">
<router-view></router-view>
</div>
</div>
<!-- Script Files -->
<script src="dist/build.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/metismenu/dist/metisMenu.min.js"></script>
</body>
问题在于折叠,当我单击“此处第一级”时,URL 更改为“#”并且丢失了。我尝试在 href 中添加任何内容,但没有成功。
等待答案!非常感谢!!
@EDIT
解决了!我添加到 Index.html 的页脚
$(function() {
$('#side-menu').metisMenu({
toggle: false
});
});
成功了!
=)
最佳答案
@Johnson 为我工作
$(function() {
$('#side-menu').metisMenu({
toggle: false
});
});
关于jquery - VueRouter + VueJs2 + MetisMenu = 折叠错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46062731/