javascript - 如何覆盖或重新定义 vue 路由器？

Question

我的问题

大家好，
我正在建立一个使用 vuejs（vue、vuex、vue-router）的网站。此外，我使用了另一个模板，即材料仪表板（此模板使用 bootrsap4 和自定义 js 文件）。
起初，一切都非常方便，我的 vue-router 运行良好。但是当我在手机上查看界面时，出现了一个问题：

在这个界面中，右上角的用户菜单和vue-router正常工作，我的页面不会每次url变化都重新加载。

但是当我更改浏览器大小时，将其变小，用户菜单栏现在将如上所示。现在的问题是这些链接就像一个普通的锚标记，每次 URL 更改时我的页面都会重新加载。

找到原因

这是用户菜单栏的代码。

<!-- language-all: lang-html -->
       <div class="collapse navbar-collapse justify-content-end">
                <div class="navbar-form"></div>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">person</i>
                            <p class="d-lg-none d-md-block">
                                Account
                            </p>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
                            <router-link class="dropdown-item" to="/test">Profile</router-link>
                            <router-link class="dropdown-item" to="/another_one">Settings</router-link>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>

问题出在模板的 javascript 自定义文件中

他们使用一个功能，当窗口变小时重写菜单栏，这可能会意外覆盖或破坏 vue-router。代码如下：

initRightMenu: debounce(function() {
    $sidebar_wrapper = $('.sidebar-wrapper');

    if (!mobile_menu_initialized) {
      $navbar = $('nav').find('.navbar-collapse').children('.navbar-nav');

      mobile_menu_content = '';

      nav_content = $navbar.html();

      nav_content = '<ul class="nav navbar-nav nav-mobile-menu">' + nav_content + '</ul>';

      navbar_form = $('nav').find('.navbar-form').get(0).outerHTML;

      $sidebar_nav = $sidebar_wrapper.find(' > .nav');

      // insert the navbar form before the sidebar list
      $nav_content = $(nav_content);
      $navbar_form = $(navbar_form);
      $nav_content.insertBefore($sidebar_nav);
      $navbar_form.insertBefore($nav_content);

      $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
        event.stopPropagation();

      });

      // simulate resize so all the charts/maps will be redrawn
      window.dispatchEvent(new Event('resize'));

      mobile_menu_initialized = true;
    } else {
      if ($(window).width() > 991) {
        // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
        $sidebar_wrapper.find('.navbar-form').remove();
        $sidebar_wrapper.find('.nav-mobile-menu').remove();

        mobile_menu_initialized = false;
      }
    }
  }, 200),

我试过什么

我尝试在他们的 js 文件中重写 javascript，如下所示：

nav_content = $navbar.html(); // I turned this


// into this
nav_content = `<li class="nav-item dropdown">
                        <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">person</i>
                            <p class="d-lg-none d-md-block">
                                Account
                            </p>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
                            <router-link class="dropdown-item" to="/test">Profile</router-link>
                            <router-link class="dropdown-item" to="another_one">Settings</router-link>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Log out</a>
                        </div>
                    </li>`

但它仍然不起作用

为了更清楚

我尝试打印出 nav_content，一切似乎都正确。我认为问题是$nav_content = $(nav_content);

我指出的问题正确吗？如果是的话，如果我得到您的建议，我将不胜感激，谢谢。

标签： javascriptjqueryvue.jsvue-router