Vue路线在Chrome中不起作用...在IE和Firefox中效果很好

Question

我的chrome浏览器中的vue路由行为不正常。在IE和firefox中，它工作正常。 在Chrome浏览器中，路线在加载后有效一次，然后停止响应... 请在下面找到代码。

主要js文件：

\\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 => h(App)
}).$mount("#app");

router.js文件：

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: () => import('./components/login.vue')
        },
        {
            path: "/register",
            name: "register",
            component: () => import('./components/register.vue')
        },
        {
            path: "/profile",
            name: "profile",
            component: () => import('./components/profile.vue')
        }

    ]
});

App.vue文件：

<template>
  <div id="app">
    <navbar></navbar>
    <logo></logo>
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import navbar from "./components/navbar";
import logo from "./components/logo.vue";

export default {
  name: "app",
  components: {
    navbar,
    logo
  }
};
</script>

导航栏组件：

  <div>
    <b-navbar toggleable="md" type="dark" class="bg-dark" variant="info">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <router-link class="link" :to="{path: '/'}"><b-navbar-brand class="brand" href="#">{{brand}}</b-navbar-brand>
</router-link>

      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <router-link class="link" :to="{path: 'register'}">register</router-link>
          <router-link class="link" :to="{path: 'login'}">Login</router-link>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>

          <b-nav-item-dropdown v-if="user" text="Lang" right>
            <b-dropdown-item href="#">EN</b-dropdown-item>
            <b-dropdown-item href="#">ES</b-dropdown-item>
            <b-dropdown-item href="#">RU</b-dropdown-item>
            <b-dropdown-item href="#">FA</b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown v-if="user" right>
            <!-- Using button-content slot -->
            <template slot="button-content">
              <em>User</em>
            </template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Signout</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

    <!-- navbar-1.vue -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      brand: "inventrano",
      register: "register",
      login: "login",
      user: false
    };
  }
};
</script>

我无法找出根本原因...