Vue.js 路由器视图没有组件？

Question

我正在尝试使用 vuex、vue-router 和 laravel 为后端制作一个 vue SPA。我在我们的 app.js 上分离我们的数据，以尽量减少混乱并保持我们的代码整洁。当一页上的所有内容都按预期工作时，将路由加载到路由器中。但是当我们将代码拆分为更模块化的时候：app.js、boostrap.js、routes.js 和 store.js

组件没有加载到我们的路由器视图中，我们可以看到我们的 RouterLink

app.js

    // Require the bootstrapper
    require('./bootstrap');

    // Grab imports
    import Store from './store';
    import Router from './routes';

    // Views
    import App from './views/App';

    // Create the application
    const app = new Vue({
      el: '#heroic',
      components: { App },
      store: Store,
      router: Router
    });

boostrap.js

    // Imports
    import Vue from 'vue';
    import Axios from 'axios';
    import Swal from 'sweetalert2';

    // Add to window
    window.Vue = Vue;
    window.Axios = Axios;

    // Add Axios headers
    window.Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    window.Axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
    window.Axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

routes.js

    // Imports
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Store from './store';

    // Set to use
    Vue.use(VueRouter);

    // Views
    import Hello from './views/Hello';
    import Home from './views/Home/';
    import UserIndex from './views/UserIndex';

    // Create our routes
    const routes = [
      {
        path: '/',
        name: 'home',
        component: Home,
      },
      {
        path: '/hello',
        name: 'hello',
        component: Hello,
      },
      {
        path: '/users',
        name: 'users.index',
        component: UserIndex,
      }
    ];

    // Create the router
    const router = new VueRouter({
      mode: 'history',
      routes: routes,
      scrollBehavior (to, from, saved) {
        if (saved) {
          return saved;
        }
        return { x: 0, y: 0};
      }
    });

    // Before every request
    router.beforeEach((to, from, next) => {

    });

    // After every request
    router.afterEach((to, from, next) => {

    });

    // Export
    export default router;

你好.vue

    <template>
      <div class="row row-cards row-deck">
        <div class="col-lg-4 col-md-6">
          <p>Hello World!</p>
        </div>
      </div>
    </template>

store.js

    // Imports
    import Vue from 'vue';
    import Vuex from 'vuex';
    import PersistedState from 'vuex-persistedstate';
    import Cookie from 'js-cookie';

    // Set use
    Vue.use(Vuex);

    // Create our store
    const store = new Vuex.Store({
      state: {
        auth: [{
          id: 1,
          username: '',
          motto: '',
          rank: 1,
          permissions: [],
          token: ''
        }],
        users: [],
      },
      mutations:{

      },
      actions: {

      },
      getters: {

      }
    });

    // Export
    export default store;

预期的结果是，当我访问“/hello”路由时，它会显示“Hello world！”的信息。位于路由器路由部分中指定为组件的 Vue 文件中。相反，使用我的 Vue DevTools 我得到以下页面上没有 Hello world。

https://i.pathetic.site/chrome_99Mbxf7f0c.png

Answer 1

我的猜测是路由器卡在等待解决beforeEach（也可能是afterEach）挂钩。您需要致电next()。

同样不相关，但如果您使用模块，则无需在 window 上分配内容。