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

【问题标题】：routes content does not show in Vue-router and Laravel路由内容未在 Vue-router 和 Laravel 中显示
【发布时间】：2021-01-14 19:52:48
【问题描述】：

我正在关注这个YT tutorial，我按照这些步骤操作，但似乎ExampleComponent 没有显示。 App.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({
    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', '.*');

提前致谢。

【问题讨论】：

控制台出现任何错误。？
没有。但是该组件不起作用。但是 vue-router 是 ^3.4.5 而 vue 是 ^2.5.17 ......我不确定这是否是问题
你的web.php 是什么？把那个也写
试试mode: 'hash' 而不是mode: 'history'
@BoussadjraBrahim OMG，哈希有效。这是为什么？我正在使用 Firefox Dev btw

标签： javascript laravel vue.js vue-component vue-router

【解决方案1】：

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

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

【讨论】：