title: The vue routes are not working in chrome... works good in IE and firefox
body: <p>The vue routes are not behaving normally in my chrome browser.. in IE and firefox it is working fine.
  In chrome the routes works once after loading and then stops responding...
  please find the code below.</p>
  
  <p><a href="https://i.stack.imgur.com/fLbKg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fLbKg.gif" alt="enter image description here"></a></p>
  
  <p><strong>The Main js file:</strong></p>
  
  <pre><code>\\main.js
  import Vue from "vue";
  import App from "./App.vue";
  import router from "./router.js";
  import BootstrapVue from "bootstrap-vue";
  
  import "bootstrap/dist/css/bootstrap.css";
  import "bootstrap-vue/dist/bootstrap-vue.css";
  import axios from 'axios';
  
  Vue.use(BootstrapVue);
  Vue.use(axios);
  
  
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    render: h =&gt; h(App)
  }).$mount("#app");
  
  
  </code></pre>
  
  <p><strong>The router.js file:</strong></p>
  
  <pre><code>import Vue from "vue";
  import vueRouter from "vue-router";
  //import home from "@/components/home";
  //import Service from "@/components/service";
  
  Vue.use(vueRouter);
  
  export default new vueRouter({
      routes: [
          {
              path: "/home",
              name: "home"
  
          },
  
          {
              path: "/login",
              name: "login",
              component: () =&gt; import('./components/login.vue')
          },
          {
              path: "/register",
              name: "register",
              component: () =&gt; import('./components/register.vue')
          },
          {
              path: "/profile",
              name: "profile",
              component: () =&gt; import('./components/profile.vue')
          }
  
      ]
  });
  
  
  </code></pre>
  
  <p><strong>The App.vue file:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;navbar&gt;&lt;/navbar&gt;
      &lt;logo&gt;&lt;/logo&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // import HelloWorld from "./components/HelloWorld.vue";
  import navbar from "./components/navbar";
  import logo from "./components/logo.vue";
  
  export default {
    name: "app",
    components: {
      navbar,
      logo
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p><strong>The navbar component:</strong></p>
  
  <pre><code>
    &lt;div&gt;
      &lt;b-navbar toggleable="md" type="dark" class="bg-dark" variant="info"&gt;
        &lt;b-navbar-toggle target="nav_collapse"&gt;&lt;/b-navbar-toggle&gt;
        &lt;router-link class="link" :to="{path: '/'}"&gt;&lt;b-navbar-brand class="brand" href="#"&gt;{{brand}}&lt;/b-navbar-brand&gt;
  &lt;/router-link&gt;
  
        &lt;b-collapse is-nav id="nav_collapse"&gt;
          &lt;b-navbar-nav&gt;
            &lt;router-link class="link" :to="{path: 'register'}"&gt;register&lt;/router-link&gt;
            &lt;router-link class="link" :to="{path: 'login'}"&gt;Login&lt;/router-link&gt;
          &lt;/b-navbar-nav&gt;
  
          &lt;!-- Right aligned nav items --&gt;
          &lt;b-navbar-nav class="ml-auto"&gt;
            &lt;b-nav-form&gt;
              &lt;b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/&gt;
              &lt;b-button size="sm" class="my-2 my-sm-0" type="submit"&gt;Search&lt;/b-button&gt;
            &lt;/b-nav-form&gt;
  
            &lt;b-nav-item-dropdown v-if="user" text="Lang" right&gt;
              &lt;b-dropdown-item href="#"&gt;EN&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;ES&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;RU&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;FA&lt;/b-dropdown-item&gt;
            &lt;/b-nav-item-dropdown&gt;
  
            &lt;b-nav-item-dropdown v-if="user" right&gt;
              &lt;!-- Using button-content slot --&gt;
              &lt;template slot="button-content"&gt;
                &lt;em&gt;User&lt;/em&gt;
              &lt;/template&gt;
              &lt;b-dropdown-item href="#"&gt;Profile&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;Signout&lt;/b-dropdown-item&gt;
            &lt;/b-nav-item-dropdown&gt;
          &lt;/b-navbar-nav&gt;
        &lt;/b-collapse&gt;
      &lt;/b-navbar&gt;
  
      &lt;!-- navbar-1.vue --&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        brand: "inventrano",
        register: "register",
        login: "login",
        user: false
      };
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p>I am not able to figure out the root cause...</p>