vue-router是Vue.js的官方路由管理庫，它可以將每個組件映射到URL地址中，使頁面顯示更加友好和方便。在vue-router中，beforeEach和beforeResolve是兩個重要的導航守衛，可以用于在路由切換前進行一些操作，比如檢查用戶是否登錄或者是否有權限訪問某些頁面。

const router = new VueRouter({
routes: [
{ path: '/login', component: LoginComponent },
{ path: '/dashboard', component: DashboardComponent },
{ path: '/profile', component: ProfileComponent },
{ path: '/settings', component: SettingsComponent },
]
})
router.beforeEach((to, from, next) =>{
const isAuthenticated = checkUserIsAuthenticated()
if (to.path !== '/login' && !isAuthenticated) {
next('/login')
} else {
next()
}
})
router.beforeResolve((to, from, next) =>{
const isAuthorized = checkUserIsAuthorized(to.meta.roles)
if (!isAuthorized) {
next({ path: '/profile', query: { redirect: to.fullPath }})
} else {
next()
}
})

如上面的代碼所示，在beforeEach里，我們檢查了用戶是否已經登錄，如果沒有登錄，則跳轉到登錄頁面；而在beforeResolve里，我們檢查了用戶是否有相應頁面的訪問權限，如果沒有，則跳轉到個人資料頁面，并將當前頁面的路徑作為query參數傳遞。

使用VueRouter的導航守衛，我們可以實現非常靈活的路由控制，從而保障網站的安全性和用戶體驗。