導航守衛是Vue提供的功能之一，可以控制頁面的跳轉，達到權限控制、頁面渲染前的數據請求等功能。下面讓我們來看看一個導航守衛的demo。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requireAuth: true //需要登錄后才能訪問
}
},
{
path: '/about',
name: 'About',
component: About
}
]
})
//全局導航守衛
router.beforeEach((to, from, next) =>{
if (to.meta.requireAuth) { //判斷是否需要登錄才能訪問
if (localStorage.getItem('user')) { //判斷本地是否存在用戶信息
next() //存在，允許訪問
} else {
next({ //不存在，跳轉到登錄界面
path: 'login',
query: {
redirect: to.fullPath //將要訪問的頁面完整地址作為參數傳遞
}
})
}
} else {
next() //不需要登錄，允許訪問
}
})
export default router

首先引入Vue和Vue Router，并配置路由表。我們定義了兩個路由：Home和About，其中Home需要登錄后才能訪問，About不需要登錄即可訪問。在Home的路由配置中，我們為meta屬性添加了requireAuth屬性，這是判斷是否需要登錄才能訪問的關鍵。

接下來，我們使用全局導航守衛來控制頁面的跳轉。在beforeEach中，我們可以獲取到要跳轉到的路由、當前路由和一個next方法。我們在這里判斷了目標路由的meta屬性中是否存在requireAuth，若存在則判斷本地是否保存了用戶信息，若存在則允許訪問，否則跳轉到登錄界面，并將要訪問的頁面完整地址作為參數傳遞。如果不需要登錄，則直接調用next()方法，允許訪問。

至此，我們完成了一個簡單的導航守衛demo。注意在實際開發中，我們還需要配置登錄界面和登錄功能，這里就不再贅述了。