routes content does not show in Vue-router and Laravel

Question

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.

There is none. But the component does not work. But vue-router is ^3.4.5 and the vue is ^2.5.17... Im not sure if that is the issue — Miro
– Miro, Commented Sep 29, 2020 at 8:29
@BoussadjraBrahim OMG, the hash works. Why is that? Im using Firefox Dev btw — Miro
– Miro, Commented Sep 29, 2020 at 8:35

Boussadjra Brahim · Accepted Answer · 2020-09-29 08:36:54Z

4

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'
});

answered Sep 29, 2020 at 8:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanaulla · Accepted Answer · 2022-03-13 17:50:58Z

0

The mode: 'hash' is a great solution.

But if u want to use mode: "history" Then you have to add base Parameter . Base is useful when the application is hosted inside of a folder like http://localhost/laravel-8/. So code rewrite like following -

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

Instead of /laravel-8/, you use your project subdirectory name.

Documentation: https://router.vuejs.org/guide/migration/#moved-the-base-option

answered Mar 13, 2022 at 17:50

Sanaulla

1,69916 silver badges15 bronze badges

Collectives™ on Stack Overflow

routes content does not show in Vue-router and Laravel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related