vue-router(vue 3)createWebHistory找不到与路径位置匹配的位置 [英] vue-router (vue 3) createWebHistory No match found for location with path
本文介绍了vue-router(vue 3)createWebHistory找不到与路径位置匹配的位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个laravel 8项目,并将laravel-mix升级到v6以支持vue 3.
I have a laravel 8 project and upgraded laravel-mix to v6 to support vue 3.
问题是来自vue-router 4的createWebHistory
The problem is the createWebHistory from vue-router 4
package.json
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
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
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;
和web.php中(laravel路由):
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');
});
如果我在route.js中使用
If I use in the routes.js
createWebHashHistory()
显示了登录表单,但我不想使用哈希历史记录.
the login form is diplayed, but I dont want to use hash history.
如果使用
createWebHistory()
然后在控制台中,我得到警告:
then in console I get a warning:
[Vue Router warn]: No match found for location with path "/configure-admin"
,页面空白.
可能是一个错误,或者我确实错过了一些东西....
Could be a bug or I did missed something....
推荐答案
已解决:)
const router = createRouter({
history: createWebHistory('configure-admin'), <-- this works
// base: 'configure-admin', <-- this does not work in vue 3
routes: routes,
linkActiveClass: 'active'
});
这篇关于vue-router(vue 3)createWebHistory找不到与路径位置匹配的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文