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....

Answer 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'
});

Answer 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/'),

Answer 3

Hopeful you're using vue-cli to generate your boiler plate, Therefore it references pages to be used by router are coming from views directory and not from your components directory and so those pages on the router can refer components from components directory

Answer 4

import NotFoundPage from "./pages/not.found.js";
import WelcomePage from "./pages/welcome.js";

export default VueRouter.createRouter({
    routes: [
        {
            path: '/',
            name: 'WelcomePage',
            redirect: 'login',
            component: WelcomePage
        },   
        {
            path: '/:pathMatch(.*)*',
            name: 'NotFoundPage',
            component: NotFoundPage,
        },`enter code here`
    ],
    history: VueRouter.createWebHistory('/admin-code-dir/'),
    base: '/admin-code-dir/',
});