Php vue路由器（vue 3）createWebHistory未找到路径为的位置的匹配项

我有一个laravel 8项目，并将laravel mix升级到v6以支持vue 3

问题在于vue路由器4的createWebHistory

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

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;

createWebHashHistory()

在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');

});

如果我在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;

createWebHashHistory()

登录表单已显示，但我不想使用哈希历史记录

如果使用

createWebHistory()

然后在控制台中我得到一个警告：

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

这一页是空白的

可能是一个bug，或者我确实错过了什么….

解决了：

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

已解决：

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

函数接受一个参数，该参数是指应用程序所在文件夹的基，在您的情况下，该参数应为：

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

函数接受一个参数，该参数是指应用程序所在文件夹的基，在您的情况下，该参数应为：

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