路由器视图未加载

Question

我已将Components附加到router-link，但未加载。我在Laravel中使用Vue js。 我正在与Laravel和Vue合作

这是我的Laravel刀片文件。

home.blade.php

\{userFolder}\.gradle\caches

AppMain.vue：

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

App.js

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

<script>

export default
{

}

错误

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

Answer 1

您是否尝试过从应用程序主要组件导入中删除“ .default”？在我从事Vue / laravel工作的初期，这也让我感到震惊。我发现仅在顶部使用“从'../模块路径'导入”或“要求（...）”状态更为安全。我不记得这指向什么JavaScript规范。

Answer 2

请尝试在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
});

Answer 3

请尝试使用此代码，以了解其作用。

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