Vue Router 是 Vue.js 的官方路由管理器，允許我們在單頁面應用中導航。但是，在某些情況下，我們希望防止用戶跳轉(zhuǎn)到某些路由或跳轉(zhuǎn)路由的前提條件不滿足。在這種情況下，我們可以使用 Vue Router 的導航守衛(wèi)來防止跳轉(zhuǎn)。

const router = new VueRouter({
routes: [
{
path: '/login',
component: Login
},
{
path: '/dashboard',
component: Dashboard,
meta: {
requiresAuth: true
}
}
]
});
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requiresAuth) && !isLoggedIn()) {
next('/login');
} else {
next();
}
});

Vue Router 的導航守衛(wèi)分為三個部分：全局守衛(wèi)、路由獨享守衛(wèi)和組件內(nèi)守衛(wèi)。在這個例子中，我們使用全局前置守衛(wèi) beforeEach 來檢查用戶是否已經(jīng)登錄。如果用戶未登錄，我們將路由重定向到登錄頁（/login）。

在這個例子中，我們使用 meta 字段來標識需要身份驗證的路由。所以，我們只需要在導航守衛(wèi)中檢查路由的 meta 字段是否為 true。如果為 true，則說明用戶必須登錄才能訪問該路由。

function isLoggedIn() {
return localStorage.getItem('token');
}

在這個例子中，我們使用一個簡單的函數(shù)來檢查用戶是否已經(jīng)登錄。在實際應用中，您可以根據(jù)需求實現(xiàn)不同的驗證機制，如 cookie、session、JWT 等。

總之，使用 Vue Router 的導航守衛(wèi)可以幫助我們防止用戶跳轉(zhuǎn)到不滿足前提條件的路由。此外，導航守衛(wèi)還提供其他功能，如在切換路由前提示用戶、在路由切換時取消異步操作等。希望這篇文章對您有所幫助。