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

【问题标题】：vue-router (vue 3) createWebHistory No match found for location with pathvue-router (vue 3) createWebHistory No match found for location with path
【发布时间】：2021-03-14 12:01:31
【问题描述】：

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

问题是来自 vue-router 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;

在 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"

页面是空白的。

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

【问题讨论】：

标签： php laravel vue.js laravel-mix vuejs3

【解决方案1】：

解决了:)

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

希望您使用 vue-cli 生成样板，因此它引用路由器使用的页面来自 views 目录，而不是来自您的 components目录所以那些路由器上的页面可以引用components目录中的组件

【讨论】：