Модальное окно «Не закрывается» на маршрутизаторе заменить в vuejs

Question

Экран становится неактивным при замене маршрута с использованием vue маршрутизатора

Ниже приведен код изменения маршрута при успешном входе

fb.auth()
    .signInWithPopup(provider)
    .then(function(result) {
      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      // var token = result.credential.accessToken;
      // console.log(token);
      // The signed-in user info.
      var user = result.user;

      var databaseReference = fb.database().ref();
      if (fb.auth().currentUser != null) {
        databaseReference.once('value').then(function(snapshot) {
          if (
            snapshot
              .child("Doctors")
              .child(user.uid)
              .exists()
          ) {
            alert("The User is already registered as a doctor");
            fb.auth().signOut();
            window.$("#login").modal("hide");
            window.$("#signin").hide();
            router.go("/");
          } else {
            window.$("#login").modal("hide");
            var dataRef = fb
              .database()
              .ref("Users")
              .child(user.uid);
            var updates = {
              uid: user.uid,
              name: user.displayName,
              email: user.email
            };
            dataRef.update(updates);
            //window.$("#signin").hide();
            router.replace("HomePage");
          }
        });
      }
    })  

Как Вы можете видеть, что я пытался скрыть модель, но экран все еще не нажимается. Насколько мне известно, я перепробовал все возможные способы.

Ниже приведен код входа в систему. vue

<template>
  <div class="login">
    <!-- Modal -->
    <div
      class="modal fade"
      id="login"
      tabindex="-1"
      role="dialog"
      aria-labelledby="loginTitle"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
              <li class="nav-item" id="google">
                <a
                  class="nav-link active"
                  id="pills-home-tab"
                  data-toggle="pill"
                  href="#pills-login"
                  role="tab"
                  aria-controls="pills-login"
                  aria-selected="true"
                >
                  <i class="fab fa-google"></i>
                </a>
              </li>
              <li class="nav-item" id="facebook">
                <a
                  class="nav-link"
                  id="pills-register-tab"
                  data-toggle="pill"
                  href="#pills-register"
                  role="tab"
                  aria-controls="pills-register"
                  aria-selected="false"
                >
                  <i class="fab fa-facebook-square"></i>
                </a>
              </li>
            </ul>

            <div class="tab-content" id="pills-tabContent">
              <div class="tab-pane fade show active" id="phone">
                <h3 class="text-center">Login With Phone</h3>
                <div class="form-group">
                  <label for="exampleInputEmail1">Phone Number</label>
                  <input
                    type="tel"
                    class="form-control"
                    id="inputPhone"
                    aria-describedby="emailHelp"
                    placeholder="Enter Phone No"
                  />
                  <small
                    class="form-text text-muted"
                  >We'll never share your phone no with anyone else.</small>
                  <button class="btn btn-primary" id="submit">SUBMIT</button>
                </div>
              </div>
              <div class="tab-pane" id="code">
                <label for="exampleInputEmail1">Enter Code</label>
                <input
                  type="tel"
                  v-model="email"
                  class="form-control"
                  id="inputCode"
                  aria-describedby="emailHelp"
                  placeholder="Enter Login Code"
                />
                <button class="btn btn-primary" id="Login">LOGIN</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Ниже указан код домашней страницы. vue

<template>
  <div class="home">
    <nav id="navibar" class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Medico</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">
              Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Account</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Profile</a>
              <div class="dropdown-divider"></div>
              <button class="dropdown-item" id="signout">Logout</button>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
          />
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <h1>This Is Home Page</h1>
  </div>
</template>