jquery - VueRouter + VueJs2 + MetisMenu = 折叠错误

标签 jquery html vue.js vuejs2 vue-router

我是 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/

相关文章:

typescript - Vue js 2.5.2 & typescript 升级错误

javascript - 在 Javascript 中单击子元素时如何覆盖父事件监听器?

javascript - 根据点击切换不同的文本

javascript - 如何限制提示框中可以放入哪些单词,以便为每个单词提供不同的提示?

html - 水平滚动表头的位置粘性

javascript - Vue.js:通过 "selected"将 html <option> 标记设置为默认值不起作用

javascript - Vue/Vuex 未知 Action 类型

javascript - Bootstrap - header 中的标识但不是 li-segment 的一部分

javascript - jQuery 看不到动态元素?

jquery - asp.net 网站性能 - 1 个页面缓慢会影响同一浏览器 session 上的其余页面