title: VueRouter + VueJs2 + MetisMenu = Collapse error
body: <p>I'm new VueJs student, and i want to make a Menu and a Second level menu into this.
  I'm want to use Jquery-MetisMenu, so a downloaded it, put it on my Index.html and i made a router view to the Menu.</p>
  
  <p><strong>Here is my Menu.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="app"&gt;
      &lt;nav class="navbar-default navbar-static-side" role="navigation"&gt;
          &lt;div class="sidebar-collapse"&gt;
              &lt;ul class="nav metismenu" id="side-menu"&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;&lt;i class="fa fa-th-large"&gt;&lt;/i&gt; &lt;span class="nav-label"&gt; Here First Level &lt;/span&gt; &lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
  
                      &lt;ul class="nav nav-second-level collapse"&gt;
                          &lt;li&gt;&lt;a href="#"&gt; Here Second Level &lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Routes.js</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Body of Index.Html</strong></p>
  
  <pre><code>  &lt;body&gt;
  
      &lt;!-- Main View --&gt;
      &lt;div id="container"&gt;
      &lt;div id="wrapper"&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Script Files --&gt;
      &lt;script src="dist/build.js"&gt;&lt;/script&gt;
      &lt;script src="./node_modules/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="./node_modules/metismenu/dist/metisMenu.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>The problem is with the collapse, when i click on "Here First Level", the URL changes to "#" and it get lost. I tried to put nothing inside href, but didn't work.</p>
  
  <p>Waiting answers! Thanks a lot!!</p>
  
  <blockquote>
    <p>@EDIT</p>
  </blockquote>
  
  <p>Solved! I add on footer of Index.html</p>
  
  <pre><code>$(function() {
    $('#side-menu').metisMenu({
      toggle: false
    });
  });
  </code></pre>
  
  <p>and it worked!</p>
  
  <p>=)</p>