当我在我的 vue-router 上添加.beforeEach 保护时，整个路由器停止工作

Question

我正在开发 Laravel 9、Vue 3 和 Vue-Router 4，

在前端路由上工作正常....但是一旦我添加了一个beforeEach警卫。 然后整个路由器停止工作

//this dont work
export const router = createRouter({
    routes,
    history : createWebHistory( import.meta.env.BASE_URL ),
    linkActiveClass : 'active'
}).beforeEach( (to, from) => {
    return true
})

//this works
 export const router = createRouter({
        routes,
        history : createWebHistory( import.meta.env.BASE_URL ),
        linkActiveClass : 'active'
    })

我需要能够在我的路由器上为受保护的页面添加保护。 下面是我的packages.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27.2",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^3.0.1",
        "moment": "^2.29.4",
        "pinia": "^2.0.18",
        "vue": "^3.2.37",
        "vue-router": "^4.1.3"
    }
}

Answer 1

您必须使用next()而不是return true

export const router = createRouter({
    routes,
    history : createWebHistory( import.meta.env.BASE_URL ),
    linkActiveClass : 'active'
}).beforeEach( (to, from, next) => {
   next();
})

但是，如果你不在那里添加任何逻辑，你为什么要调用 beforeEach 方法呢？ . 当您有条件路由或需要在呈现页面之前编辑数据时，应该使用beforeEach 。