0
저는 새로운 VueJs 학생입니다.이 메뉴와 두 번째 레벨 메뉴를 만들고 싶습니다. Jquery-MetisMenu를 사용하고 싶습니다. 다운로드 한 후 Index.html에 넣고 메뉴를 라우터보기로 만들었습니다.VueRouter + VueJs2 + MetisMenu = 축소 오류
은 여기 내 Menu.vue
<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>
홍보 index.html을의
<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
몸이다 oblem이 붕괴 된 상태에서 "Here First Level"을 클릭하면 URL이 "#"로 바뀌며 잃어 버리게됩니다. href 안에 아무것도 넣지 않으려 고했지만 작동하지 않았습니다.
대기중인 답변! 고마워요 !!
@EDIT
를 해결! 나는 Index.html의 바닥 글에 덧붙인다.
$(function() {
$('#side-menu').metisMenu({
toggle: false
});
});
그리고 그것은 효과가있다!
=)
그래에 날 위해 일했습니다. 해결책은 질문에 너무있다;) – Johnson