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

Question

我正在关注这个YT 教程，我遵循了这些步骤，但似乎没有显示ExampleComponent 。 App.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({
    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>

应用程序刀片 php

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

web.php

Auth::routes();

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

提前致谢。

Answer 1

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

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

Answer 2

mode: 'hash'是一个很好的解决方案。

但是如果你想使用mode: "history"那么你必须添加base参数。 当应用程序托管在像http://localhost/laravel-8/这样的文件夹中时， Base很有用。 所以代码重写如下 -

export default new VueRouter({
    mode: "history",
    base: '/laravel-8/',
    fallback:true,
    routes : [
        { path : '/', component : ExampleComponent }
    ]
})

您可以使用项目子目录名称代替/laravel-8/ 。

文档：https://router.vuejs.org/guide/migration/#moved-the-base-option

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-09-29 08:36:54

解决方案2
0 2022-03-13 17:50:58

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-09-29 08:36:54

解决方案2 0 2022-03-13 17:50:58

解决方案1
3 已采纳 2020-09-29 08:36:54

解决方案2
0 2022-03-13 17:50:58