I am a complete beginner in Vue js and Vue Router, 404 page not found error

Question

I cant seem to get this simple vue router work, its giving this in console GET http://127.0.0.1:8000/my-new-router 404 (Not Found), i am using it with laravel

app.js:

require('./bootstrap');
window.Vue = require('vue');
import router from './router'
Vue.component('navbar', require('./components/navbar.vue').default);
const app = new Vue({
    el: '#app',
    router
});

router.js:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/MyFirstPage'
const routes= [
    {
        path: '/my-new-router',
        component: firstPage
    }
]
export default new Router({
    model:'history',
    routes
})

navbar.vue:

<template>
    <div>
        <h1>This is a test</h1>
        <router-view></router-view>
    </div>
</template>

MyFirstPage.vue:

<template>
    <div>
        
    </div>
</template>

welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
    </head>
    <body>
        <div id="app">
            <navbar></navbar>
        </div>
    </body>
    <script src="{{ asset('js/app.js') }}"></script>
</html>

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

    Route::get('/', function () {
        return view('welcome');
    });

first change model:'history' to mode:'history', and add to the question your laravel routes.php file — Igor Moraru

Igor Moraru Igor Moraru · Accepted Answer · 2020-07-17T15:37:21

Change the content of web.php to:

<?php

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

This way any route will be forwarded to vue-router.

I am a complete beginner in Vue js and Vue Router, 404 page not found error

1 Answers