因此,我试图通过使用laravel vue vue-router和vuex构建一个SPA来了解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文件
app.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
});
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 }
]
} )
App.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
<!---->
答案 0 :(得分:0)
我尝试在codesandbox中重新创建代码,结果发现您定义的路线错误。您必须在router
上使用routes
来代替router.js
https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js
在您的app.js
中,您告诉Vue应用安装在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', '.*');
答案 1 :(得分:0)
好的,请尝试这个。
router: [
{ path: '/example', component: ExampleComponent }
]
然后访问URL“ http:// localhost / exmaple”,看看它是否正常工作。