對于網站或者應用來說，登錄系統是必不可少的。在Vue中，我們可以通過路由來實現未登錄用戶跳轉到登錄頁面以及登錄后的用戶跳轉到指定頁面等操作。

Vue Router是Vue.js官方的路由管理器，我們可以通過使用它來管理應用程序的路由。首先，我們需要先下載Vue Router

npm install vue-router --save

然后在我們的Vue實例中引用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

在Vue Router中，我們可以使用路由守衛機制來控制用戶訪問頁面時的權限問題?？梢酝ㄟ^beforeEach守衛來進行判斷，如下：

const router = new VueRouter({
routes: [...]
})
router.beforeEach((to, from, next) =>{
const isLogin = localStorage.getItem('token') ? true : false;
if (to.path == "/login") {
next();
} else {
isLogin ? next() : next('/login');
}
})
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

上面的代碼中，我們首先先判斷用戶是否登錄，如果已經登錄則直接跳轉到所要訪問的頁面。如果未登錄則會跳轉到登錄頁面。

在需要進行登錄判斷的頁面中，我們可以使用beforeRouteEnter守衛來進行判斷：

export default {
data() {
return {
...
}
},
beforeRouteEnter(to, from, next) {
const isLogin = localStorage.getItem("token") ? true : false;
if (isLogin) {
next();
} else {
next("/login");
}
},
}

beforeRouteEnter守衛在路由進入之前被調用，所以我們可以在這個守衛中進行用戶登錄的判斷。在判斷中，如果用戶已經登錄則可以直接進入當前頁面。如果未登錄則會跳轉到登錄頁面。

總之，在Vue中實現未登錄跳轉是比較簡單的。只需要在Vue Router中使用beforeEach守衛以及在頁面中也使用beforeRouteEnter守衛進行登錄判斷即可。