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

Posted 2023-02-22

【中文标题】Vue.js 路由器视图没有组件？

【英文标题】：Vue.js router view no components?

【发布时间】：2019-11-29 10:54:38

【问题描述】：

我正在尝试使用 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

【问题讨论】：

您在控制台中有错误。它在说什么？顺便说一句，我不确定是否可以将组件的“查看”部分解耦然后导入它，每个组件都应该有模板+脚本，将模板返回到 app.vue 并使用<router-view></router-view>

控制台中的错误与我从 ThemeForest 购买的 Bootstrap 管理模板的 JS 错误有关，所以我认为这不一定相关，但就是这样； i.pathetic.site/QfG5FdqhEM.png。话虽如此，我不确定您将模板返回 app.vue 是什么意思？

【参考方案1】：

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

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

【讨论】：

伙计，我不敢相信我忽略了一些愚蠢的事情。但是，是的，这似乎解决了它。至于窗口方法，我是否只需使用我的 Axios 配置创建一个模块并在需要的地方导入它？因为是的，我在尝试修复它时注意到 window.Vue 几乎是多余的。

去掉分配给window的代码即可；如果你在别处导入 axios，它仍然会被配置。