[Vuejs]-Vue routing dynamic

Small example for you.

Laravel part
Your "web" routes in Laravel

Route::get('/{any}', 'AppController')->where('any', '.*');

Inside invoke controller

public function __invoke()
    {
        return view('app');
    }

In app.blade

@extends('layouts.app')

@section('content')
<div id="app">
    <app/>
</div>
@endsection

Vuejs part:

Your router file

import Login from "./views/Login";
import Home from "./views/Home";
import NotFound from "./views/NotFound";

Vue.use(VueRouter);

let router = new VueRouter({
    routes: [
        { path: '/login', name: 'login', component: Login },
        { path: "/", name: 'home', component: Home },
        { path: "*", name: '404', component: NotFound }
});

In app.js

import router from './router';

const app = new Vue({
    store,
    router,
    i18n,
    el: '#app',
});

All post, put, patch routes should be "api" routes.

You could try Vue Router’s Dynamic Route matching, passing different values for route parameters: https://router.vuejs.org/guide/essentials/dynamic-matching.html