Vue Router 是一種用于組織 Vue.js 應用程序中的導航的官方路由器。它允許您定義導航前進和后退時切換的組件/視圖。Vue Router 本身是 Vue.js 核心庫的插件，但它不需要在一個Vue.js 應用程序中使用，也可以靜態使用。

Vue Router 整合了 Vue.js 核心，并提供了簡單的 API 來進行路由設定。路由器（Router）就是根據 URL 的不同返回不同的視圖/組件，因此監聽 router 對于整個應用的開發來說極為重要。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [/*your routes*/]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) =>{
// 這里實現深度監聽，即 beforeRouteUpdate
// 頁面更新之前先執行這里的代碼
next()
})
export default router

在 Vue Router 中監聽到的一些路由變化不會反映在組件實例本身上，因此可以使用 beforeRouteUpdate 來深度監聽當前組件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
props: {
default: true,
sidebar: false
}
},
{
path: '/about',
component: About,
props: {
default: false,
sidebar: true
}
}
]
})
const sidebarData = {
'/': {
default: true,
sidebar: false
},
'/about': {
default: false,
sidebar: true
}
}
router.beforeEach((to, from, next) =>{
const data = Object.assign({}, to.meta.data, sidebarData[to.path])
to.meta.data = data
next()
})
export default router

除了深度監聽之外，還可以根據路由元信息（路由上的自定義數據）做出適當的響應。當路由切換時，路由守衛的 to 對象和 from 對象分別表示即將進入的路由和即將離開的路由，可以向 to.meta.data 中添加元信息，動態設置頁面的數據。

在 Vue.js 應用程序內，可以通過 Vue-Router 插件輕松管理 navigation。在管理 URL 時，它提供了一些便利。此外，Vue-Router 的“深度監聽”功能特別適用于對路由變化做出響應。因此，在 Vue.js 應用程序中對 Vue-Router 進行深度監聽非常重要。