路由器视图未加载答案

【问题标题】：Router-view is not loading路由器视图未加载
【发布时间】：2019-06-21 16:38:25
【问题描述】：

我已将组件附加到路由器链接，但它没有加载。我在 Laravel 中使用 Vue js。我正在使用 Laravel 和 Vue

这是我的 Laravel 刀片文件。

home.blade.php

<div id="app">
    <app-main></app-main>
</div>

AppMain.vue:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default
{
 
}

App.js

Vue.component('app-main', require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));


const routes = [
{ 
    path: '*', 
    component: require('./components/front/common/AppMain.vue')
},
{ 
    path: '/login', 
    component: require('./components/auth/Login.vue')
}
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router
});

错误

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

found in

---> <Anonymous>
       <AppMain> at resources/js/components/front/common/AppMain.vue
         <Root>

【问题讨论】：

github.com/vuejs/vue-router/issues/713

标签： laravel vue.js router vue-router laravel-5.7

【解决方案1】：

请尝试使用此代码，看看它是否有效。

const app = new Vue({
    router,
    el: '#app',
    render: h => h(App) //add this new line
});

【讨论】：

【解决方案2】：

您是否尝试过从 app-main 组件导入中删除“.default”？在我早期的 vue/laravel 工作中，这也让我感到震惊。我发现在顶部使用“从'../module path'导入”或“require（...）”状态更安全。我不记得这指向的是什么 JavaScript 规范。

【讨论】：

const routes = [ { path: '/', name: 'AppMain', component: AppMain }, { path: '/login', name: 'Login', component: Login } ]
这样给出。但是错误来了。[Vue 警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

【解决方案3】：

请在app.js 中尝试使用此代码。

import Vue from 'vue';
window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

Vue.component('app-main',require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));

import appMain from './components/front/common/AppMain';
import appLogin from './components/auth/Login';


const routes = [
    {
      path: '/',
      component: appMain,
      children: [
          { 
              path: 'login',
              component: appLogin
          }
      ]
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router: router
});

【讨论】：