路由器视图未加载

Posted 2023-02-22

【中文标题】路由器视图未加载

【英文标题】：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

【参考方案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
);