路由器视图未加载内容，无法安装模板答案

【问题标题】：Router-view not loading contents, failed to mount template路由器视图未加载内容，无法安装模板
【发布时间】：2020-07-29 05:15:55
【问题描述】：

我是 Laravel 和 Vue Js 的新手。我遇到了一个问题，我无法弄清楚确切的问题是什么。

app.blade.php

<body>
    <v-app id="app">

            <example-component/>

    </v-app>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import vuetify from './vuetify';
import router from './router';  


import Example from './components/ExampleComponent';


    new Vue({
    el: '#app',
    router,
    vuetify


});

ExampleComponent.vue


<template>
<div>
  <v-content>
  <v-container>   
        <v-btn color="primary" link to="/foo">Foo</v-btn>     
        <v-btn color="primary" link to="/bar">Bar</v-btn>
  </v-container>

    <router-view></router-view>
  </v-content>
  </div>

</template>

<script>
export default {

}
</script>

<style>

</style>

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify)

export default new Vuetify({

})

路由器.js

import Vue from 'vue';
import VueRouter from 'vue-router';

const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}

Vue.use(VueRouter)



const routes = [
    {
        path: '/foo',
        component: foo,
    },
    {
        path: '/bar',
        component: bar,
    }

]

export default new VueRouter({
    routes
})

它在控制台中给了我这个错误：

app.js:23169 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <VContent>
         <ExampleComponent> at resources/js/components/ExampleComponent.vue
           <VApp>
             <Root>

我的按钮没有加载路由器视图。另外，我想知道使用 import 和 Vue.component 注册组件有什么区别？请帮帮我。

【问题讨论】：

标签： laravel vue.js vue-component vuetify.js vue-router

【解决方案1】：

好像有错别字。变化：

const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}

到

const foo = {template: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {template: '<v-alert type="success">I am Bar</v-alert>'}

【讨论】：