VueJS 路由器“无法安装组件：未定义模板或渲染功能。”答案

【问题标题】：VueJS Router 'Failed to mount component: template or render function not defined.'VueJS 路由器“无法安装组件：未定义模板或渲染功能。”
【发布时间】：2017-07-13 13:04:20
【问题描述】：

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

here 描述了我最初的问题，但已解决。我将其包含在此处，以便您了解我到目前为止采取了哪些步骤。

现在，我收到以下警告：[Vue warn]: Failed to mount component: template or render function not defined.

警告还不错，但路由器视图没有显示。也就是说，“主页”和“关于”链接下方没有显示任何内容。

master.blade.php

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

首页.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]

资源/资产/js/app.js

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');
}

[编辑 2]

资源/资产/js/routes.js

import VueRouter from 'vue-router';


let routes = [
    {
        path: '/',
        component: require('./views/Home.vue')
    }
];

export default new VueRouter({
    routes
});

【问题讨论】：

你能在js/app.js中显示你有什么吗？
感谢您的回复！我添加了我的 app.js 和 bootstrap.js 文件。
routes.js VueRouter 中的路线是否有模板或组件。
对不起 - 我也应该包括在内。我刚刚更新了我的问题以包含我的 routes.js 文件
这带来了/views/Home.vue :)

标签： laravel webpack laravel-mix

【解决方案1】：

啊！感谢TheFallen 的问题，我明白了我的问题。这是我的 routes.js 文件的样子：

import VueRouter from 'vue-router';
import Home from './views/Home.vue';

let routes = [
    {
        path: '/',
        component: Home
    }
];

export default new VueRouter({
    routes
});

【讨论】：