vue-router (vue 3) createWebHistory No match found for location with path

Question

I have a laravel 8 project and upgraded laravel-mix to v6 to support vue 3.

The problem is the createWebHistory from vue-router 4

package.json

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.3",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.0-beta.14",
        "lodash": "^4.17.19",
        "postcss": "^8.1.10",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.29.0",
        "sass-loader": "^8.0.2",
        "vue-loader": "^16.1.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "mitt": "^2.1.0",
        "vue": "^3.0.3",
        "vue-cookie-next": "^1.0.3",
        "vue-router": "^4.0.0-rc.6",
        "vue-sweetalert2": "^4.1.1"
    }
}

webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/vue-admin/js/app.js', 'public/admin-store/js')
    .sass('resources/vue-admin/sass/app.scss', 'public/admin-store/css')
    .options({ processCssUrls: false })
    // .sourceMaps()
    .vue({ version: 3 });

the routes.js

import { createRouter, createWebHistory } from 'vue-router';

import Login from "./auth/Login";
import Logout from "./auth/Logout"
import AuthLayout from "./layout/AuthLayout";
import DashboardLayout from "./layout/DashboardLayout";
import Dashboard from "./views/Dashboard";


let routes = [
    {
        path: '/',
        redirect: 'dashboard',
        component: DashboardLayout,
        children: [
            {
                path: '/',
                component: Dashboard,
                name: 'dashboard',
                meta: {
                    requiresAuth: true
                }
            },            
            {
                path: '/logout',
                component: Logout,
                name: 'logout',
                meta: {
                    requiresAuth: true
                }
            }
        ]
    },
    {
        path: '/',
        redirect: 'login',
        component: AuthLayout,
        children: [
            {
                path: '/login',
                component: Login,
                name: 'login',
                meta: {
                    requiresVisitor: true
                }
            },
        ]
    }
];

const router = createRouter({
    history: createWebHistory(),
    base: 'configure-admin',
    routes: routes,
    linkActiveClass: 'active'
});

router.beforeEach((to, from) => {
    if (to.meta.requiresAuth && !isLoggedIn) {
        return {
            name: 'login',
        }
    }
})

export default router;

and in web.php (laravel routes):

Route::prefix('configure-admin')->group(function() {

    Route::get('/', function(){
        return view('admin.home');
    });

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

});

If I use in the routes.js

createWebHashHistory()

the login form is diplayed, but I dont want to use hash history.

If using

createWebHistory()

then in console I get a warning:

[Vue Router warn]: No match found for location with path "/configure-admin"

and the page is blank.

Could be a bug or I did missed something....

Solution 1

solved :)

const router = createRouter({
    history: createWebHistory('configure-admin'), <-- this works
    // base: 'configure-admin', <-- this does not work in vue 3
    routes: routes,
    linkActiveClass: 'active'
});

Solution 2

createwebhistory function accepts one parameter which the base that refers to the folder where the app is hosted, in your case it should be :

  history: createWebHistory('/configure-admin/'),