Unable to achieve path jump of vue-router

Question

So when I'm on the home page (http://127.0.0.1:8000/) I get the correct components I set in the vue-router file, but whenever I go to http://127.0 .0.1:8000/dashboard, it shows me a 404 error and I really don't know why. The path to the component is correct

This is my vue-router file:

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

Vue.use(VueRouter)

import loginPage from '../Pages/loginPage'
import dashboard from '../Pages/dashboard'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'login',
            component: loginPage
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: dashboard,
        },
    ],
});

export default router;

This is my app.js file

import Vue from 'vue';
import index from './Index.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router';

import axios from 'axios';
import VueAxios from 'vue-axios';

window.Vue = require('vue').default;


newVue({
    router,
    render: h => h(index),
  }).$mount('#app')

This is the index.vue file (where I display the component when the link changes)

<template>
    <div class="aa">
        <p>hallo world</p>
        <router-view/>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component hoi.')
        }
    }
</script>

Answer 1

If you are using Laravel Vue, you must check if you are passing the route

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