[英]Laravel Vue — router-view not rendering
所以我试图通过使用 laravel vue vue-router 和 vuex 构建一个来了解 SPA。
我的问题是,无论我做什么,路由器视图都根本没有渲染,我在这里开始失去希望,它只显示来自 vue 组件的 Hello 消息。
只要我知道代码没有任何错误。
这是我的设置和文件
Laravel 路由器页面:web.php
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
home.blade.php:
@extends('layouts.app')
@section('content')
<App></App>
@endsection
这是我的 vue 文件
应用程序.js:
import Vue from 'vue';
import router from './router'
import App from './components/App'
require('./bootstrap');
const app = new Vue({
el: '#app',
components: { App },
router
});
路由器.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import ExampleComponent from './components/ExampleComponent'
Vue.use( VueRouter )
export default new VueRouter( {
mode: 'history',
router: [
{ path: '/', component: ExampleComponent }
]
} )
应用程序.vue 文件
<template>
<div class="content">
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
ExampleComponenet.vue
<template>
<div>
<h1>This is the Example Component</h1>
</div>
</template>
我得到的OUT PUT是 App.vue 组件加载但<router-view></router-view>
呈现为 html 注释<!---->
Hello
<!---->
我尝试在 codeandbox 中重新创建您的代码,结果发现您定义了错误的路线。 您必须在router.js
上使用routes
而不是router
https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js
在你的app.js
你告诉 Vue app 挂载在一个 id 为app
的元素上,因此
{
el: "#app",
components: ...
}
但是在你的home.blade.php
你没有任何<div id="app"></div>
。
它可能存在于您的layouts.app
但您没有包含它。 如果它不存在,那就是问题所在。
我也不确定你是如何在 Laravel 中声明你的路线的:
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
通常它看起来像:
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
好的,请试试这个。
router: [
{ path: '/example', component: ExampleComponent }
]
然后访问 URL "http://localhost/exmaple" 并查看它是否正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.