代码之家  ›  专栏  ›  技术社区  ›  murribu

VueJS路由器“无法装载组件:未定义模板或渲染函数。”

  •  1
  • murribu  · 技术社区  · 7 年前

    我在看这个视频: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true

    here ,但问题解决了。我把它包括在这里,这样你就可以看到我到目前为止采取了哪些步骤。

    现在,我得到了这个警告:[Vue warn]:无法装载组件:未定义模板或渲染函数。

    警告还不错,但路由器视图没有显示。也就是说,在主页下方和链接上没有显示任何内容。

    <!doctype html>
        <html lang="en">
        <head>
            <title>My App</title>
            <link rel="stylesheet" href="/css/app.css">
        </head>
        <body>
            <div id="app">
                <router-link to="/">Home</router-link>
                <router-link to="/about">About</router-link>
    
                <router-view></router-view>
            </div>
            <script src="/js/app.js"></script>
        </body>
    </html>
    

    Home.vue

    <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Home Page</div>
    
                        <div class="panel-body">
                            I'm an example component!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>
    

    谢谢

    [编辑1]

    import './bootstrap';
    import router from './routes';
    
    
    new Vue({
        el: '#app',
        router
    });
    

    资源/资产/js/bootstrap.js

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import axios from 'axios';
    
    window.Vue = Vue;
    Vue.use(VueRouter);
    
    window.axios = axios;
    
    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    
    let token = document.head.querySelector('meta[name="csrf-token"]');
    
    if (token) {
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
    } else {
        console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
    }
    

    资源/资产/js/routes.js

    import VueRouter from 'vue-router';
    
    
    let routes = [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ];
    
    export default new VueRouter({
        routes
    });
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   murribu    7 年前

    TheFallen 的问题,我明白我的问题。这是我的路线。js文件应该如下所示:

    import VueRouter from 'vue-router';
    import Home from './views/Home.vue';
    
    let routes = [
        {
            path: '/',
            component: Home
        }
    ];
    
    export default new VueRouter({
        routes
    });