Vue маршруты не работают в Chrome ... хорошо работает в IE и Firefox - PullRequest
Новая
       12

Vue маршруты не работают в Chrome ... хорошо работает в IE и Firefox

0 голосов
/ 18 февраля 2019

В моем браузере Chrome маршруты vue не работают нормально ... в IE и firefox он работает нормально.В chrome маршруты работают один раз после загрузки, а затем перестают отвечать ... найдите код ниже.

enter image description here

Основной файл 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>

Компонент navbar: 


  <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>

Я не могу выяснить причину ...

...