vue-router (vue 3) createWebHistory не найдено совпадения местоположения с путем


vue-router (vue 3) createWebHistory не найдено совпадения местоположения с путем

02.12.2020 04:59:58 Просмотров 171 Источник

У меня есть проект фреймворк Laravel 8 и обновить фреймворк Laravel-смешать до V6, чтобы поддержать вю-3.

Проблема заключается в createWebHistory от vue-router 4

пакет.в 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"

и страница пустая.

Может быть, это ошибка, или я действительно что-то пропустил....

У вопроса есть решение - Посмотреть?

Ответы - vue-router (vue 3) createWebHistory не найдено совпадения местоположения с путем / vue-router (vue 3) createWebHistory No match found for location with path

calin24

02.12.2020 05:45:35

решенный :)

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

02.12.2020 10:19:18

функция createwebhistory принимает один параметр-base, который ссылается на папку, в которой размещено приложение, в вашем случае это должно быть :

  history: createWebHistory('/configure-admin/'),
Помочь в развитии проекта:
Закрыть X