路由内容未在 Vue-router 和 Laravel 中显示

2022-01-25 00:00:00 javascript laravel vue.js vue-router vue-component

我遵循此 YT 教程，但我遵循了这些步骤似乎 ExampleComponent 没有显示.App.vue 显示但不显示路由.

这是我的代码:

app.js

从'vue'导入Vue；从'./router'导入路由器；从'./components/App'导入应用程序；要求('./bootstrap')；const app = new Vue({埃尔:'#app'，组件: {应用程序},路由器，});

router.js

从'vue'导入Vue；从'vue-router'导入VueRouter；从'./components/ExampleComponent'导入ExampleComponent；Vue.use(VueRouter);导出默认的新 VueRouter({路线:[{ 路径:'/'，组件:ExampleComponent }],模式:'历史'});

App.vue

<模板>
<h1>你好！</h1><路由器视图></路由器视图></div></模板><脚本>导出默认{名称:应用程序"}</脚本><样式范围></风格>

app.blade.php

<div id=app"><应用></应用></div></身体>

web.php

Auth::routes();Route::get('/{any}', 'HomeController@index')->where('any', '.*');

提前致谢.

解决方案

将模式从 history 更改为 hash 因为这种情况下的历史模式保留给 Laravel 路由系统:

export default new VueRouter({路线:[{ 路径:'/'，组件:ExampleComponent }],模式:哈希"});

Im following this YT tutorial, I followed the steps but it seems that the ExampleComponent does not show. The App.vue shows but not the route.

Here are my code:

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({
    routes : [
        { path : '/', component : ExampleComponent }
    ],
    mode: 'history'
});

App.vue

<template>
    <div>
        <h1> Hello!</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : "App"
    }
</script>

<style scoped>
    
</style>

app.blade.php

<body>
    <div id="app">
        <App></App>
    </div>
</body>

web.php

Auth::routes();

Route::get('/{any}', 'HomeController@index')->where('any', '.*');

Thanks in advance.

解决方案

Change the mode from history to hash because the history mode in this case is reserved to Laravel routing system :

export default new VueRouter({
routes : [
    { path : '/', component : ExampleComponent }
],
mode: 'hash'
});

相关文章