[英]Laravel Vue — router-view not rendering
So i'm trying to learn about SPA by building one with laravel vue vue-router and vuex.所以我试图通过使用 laravel vue vue-router 和 vuex 构建一个来了解 SPA。
my problem is that router-view is not rendering at all no matter what i do and i'm starting to lose hope in here, and it displays Hello message from vue components only.我的问题是,无论我做什么,路由器视图都根本没有渲染,我在这里开始失去希望,它只显示来自 vue 组件的 Hello 消息。
the code as long as i know don't have any errors.只要我知道代码没有任何错误。
this is my setup and files这是我的设置和文件
laravel router page: web.php Laravel 路由器页面:web.php
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
home.blade.php: home.blade.php:
@extends('layouts.app')
@section('content')
<App></App>
@endsection
and this is my vue files这是我的 vue 文件
app.js:应用程序.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路由器.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 file应用程序.vue 文件
<template>
<div class="content">
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
ExampleComponenet.vue ExampleComponenet.vue
<template>
<div>
<h1>This is the Example Component</h1>
</div>
</template>
the OUT PUT that i got is the App.vue component loads but <router-view></router-view>
render as html comment <!---->
我得到的OUT PUT是 App.vue 组件加载但<router-view></router-view>
呈现为 html 注释<!---->
Hello
<!---->
I tried recreating your code in codesandbox and it turns out you're defining your routes wrong.我尝试在 codeandbox 中重新创建您的代码,结果发现您定义了错误的路线。 Instead of router
you have to use routes
on your router.js
您必须在router.js
上使用routes
而不是router
https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js
In your app.js
you're telling Vue app to mount on an element with an id of app
thus the在你的app.js
你告诉 Vue app 挂载在一个 id 为app
的元素上,因此
{
el: "#app",
components: ...
}
but on your home.blade.php
you dont have any <div id="app"></div>
.但是在你的home.blade.php
你没有任何<div id="app"></div>
。
It could be that it exists on your layouts.app
but you didn't include it.它可能存在于您的layouts.app
但您没有包含它。 If it's not there, then that's the problem.如果它不存在,那就是问题所在。
I'm not also sure about how you declared your route in Laravel:我也不确定你是如何在 Laravel 中声明你的路线的:
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
Usually it'd look like:通常它看起来像:
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
Source: https://laravel-news.com/using-vue-router-laravel来源: https : //laravel-news.com/using-vue-router-laravel
Okay, please try this.好的,请试试这个。
router: [
{ path: '/example', component: ExampleComponent }
]
then visit URL "http://localhost/exmaple" and see if it works correctly.然后访问 URL "http://localhost/exmaple" 并查看它是否正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.