Default route is not working with laravel and vue

Question

I am creating a single page application using laravel and vue. it's not loading index component on page load.

web.php

Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');

Welcome.blade.php

<body>
    <div id="app">
    <router-view></router-view>      
    </div>
  <script src="{{asset('js/app.js')}}"></script>
</body>

router.js file

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)
const routes = [
{ path: '/', component: require('./components/IndexComponent.vue') },
{ path: '/login', component: require('./components/LoginComponent.vue') }
]

const router = new VueRouter({
routes:routes,
mode:'history' 
})
export default new VueRouter({router})

app.js file

require('./bootstrap');

window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';

import Index from './components/IndexComponent'; 
import Login from './components/LoginComponent'; 

var app = new Vue({
el: '#app',
router,
vuetify,
components: {
    'index-component':Index,
    'login-component':Login
}
});

Index Component (IndexComponent.vue)

<template>
  <router-link to="/" class="nav-item nav-link">Home</router-link>
                <router-link to="/login" class="nav-item nav-link">Login</router-link>
 <router-view></router-view>
 </template>

Route::get('{any}', function () { return view('welcome'); })->where('any', '.*'); — kapildevsharma
– kapildevsharma, Commented Dec 16, 2020 at 4:10
try export default new VueRouter({router}) to export default router — Kamlesh Paul
– Kamlesh Paul, Commented Dec 16, 2020 at 4:32
First step, try to establish if the problem is in Laravel or vue. If you return 'hello'; instead of your view, does it work? There is no point adding a regular expression which matches anything, keep it simple, remove ->where('any', '.*'). — Don't Panic
– Don't Panic, Commented Dec 16, 2020 at 8:34
What does not loading index component mean, exactly? 404? Server error? What does browser devtools show? Logs? — Don't Panic
– Don't Panic, Commented Dec 16, 2020 at 8:47

Bizhan Hejazi · Accepted Answer · 2021-09-08 09:42:58Z

0

I had the same problem. Open your project in chrome and press Ctrl + Shift + I (Open console). Now after the login you can see that there is a warning which says: No match for favicon.ico. To solve this problem you go to your routes file and define a redirect:

{
    path: '/favicon.ico',
    redirect: '/user/dashboard'
}

edited Sep 8, 2021 at 9:42

answered Sep 8, 2021 at 9:29

Bizhan Hejazi

113 bronze badges

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

Collectives™ on Stack Overflow

Default route is not working with laravel and vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related