vue-router (vue 3) createWebHistory 找不到与路径匹配的位置

Question

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

问题是来自 vue-router 4 的 createWebHistory

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

在 web.php（laravel 路由）中：

 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 中使用

createWebHashHistory()

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

如果使用

createWebHistory()

然后在控制台中我收到警告：

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

页面是空白的。

可能是一个错误，或者我确实错过了一些东西……

原文由 calin24 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

createwebhistory 函数接受一个参数 base 指的是托管应用程序的文件夹，在您的情况下它应该是：

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

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议