CODEWITHSUNDEEP
javascriptlaravelvue.jsvue-componentvue-router
Miro
Miro

Reputation: 395

routes content does not show in Vue-router and Laravel

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.

Upvotes: 4

Views: 1250

Answers (2)

Sanaulla
Sanaulla

Reputation: 1619

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

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 4

Related Questions