Vue Router 和 Vuex 在 Vue.js 中起重要作用，特別是在登錄系統中。Vue Router 是一個官方的路由管理器，使得我們能夠在 Vue.js 應用中進行頁面之間的導航。而 Vuex 則是一個狀態管理模式。這兩個工具在登陸系統中結合使用能夠有效提高開發效率。

首先，Vue Router 提供了一個通過鏈接來導航系統的方法。這意味著我們可以使用鏈接來切換頁面而不是重新加載整個頁面。同時，Vue Router 也支持命名視圖和組件緩存等功能。這些特性能夠有效地提高系統的響應速度和用戶的體驗。

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)) {
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})

在上面的示例中，我們定義了兩個路由：一個是登陸頁面的路由，另一個是 Dashboard 頁面的路由。Dashboard 需要權限認證才能訪問，我們使用 meta 字段來標記需要認證，然后在 beforeEach 鉤子中進行認證。如果用戶沒有登陸，則跳轉到登錄頁面。

當用戶登錄成功之后，我們需要在系統狀態中存儲用戶信息，并標記用戶已經登錄。為此，我們使用 Vuex 管理系統狀態。通過使用 Vuex，我們可以集中管理系統狀態，并能夠方便地在任何組件中獲取狀態。此外，Vuex 還提供了狀態的變更通知機制，使得多個組件可以共享同一狀態。

const store = new Vuex.Store({
state: {
user: null,
loggedIn: false
},
mutations: {
login(state, user) {
state.user = user
state.loggedIn = true
},
logout(state) {
state.user = null
state.loggedIn = false
}
}
})
store.commit('login', {
username: 'admin',
password: '123456'
})

在上面的代碼中，我們定義了一個包含 user 和 loggedIn 兩個狀態值的 Vuex Store。然后定義 login 和 logout 兩個 mutations 用來更新狀態。當用戶成功登錄時，我們通過調用 login mutation 來更新用戶信息和登錄狀態。

總的來說 Vue Router 和 Vuex 在登錄系統中是不可或缺的。通過在 Vue.js 中使用這兩個庫，我們能夠方便地管理頁面路由和系統狀態，并且能夠提高系統的響應速度和用戶的體驗。