Vue Router是Vue.js官方的路由管理器，可以幫助開發者實現SPA（單頁應用）中的路由管理，從而實現頁面切換、參數傳遞、攔截等功能，具有非常高的靈活性和擴展性。

使用Vue Router時，我們需要定義路由規則，根據路由規則進行跳轉。Vue Router中的路由規則由路徑、組件、參數等組成，我們需要定義路由映射表來進行注冊，當路徑匹配時，Vue Router會自動渲染對應的組件。

//定義路由映射表
const routes = [
{ path: '/', component: HomeComponent }, 
{ path: '/user/:id', component: UserComponent }
]
//創建Vue Router實例
const router = new VueRouter({ routes })

當路徑為"/"時，Vue Router會自動渲染HomeComponent組件，當路徑為"/user/:id"時，Vue Router會自動渲染UserComponent組件，其中":id"表示一個參數，可以通過$route.params.id獲取。

//使用router-link進行路由跳轉HomeUser//使用router.push()進行路由跳轉
this.$router.push('/')
this.$router.push({ path: '/user/' + this.userId })

在Vue中，我們可以使用router-link組件或router.push()方法進行路由跳轉。使用router-link組件時，to屬性指定跳轉的路徑；使用router.push()方法時，傳遞路徑或路由對象來指定跳轉的路徑。

當路由跳轉時，我們可以使用路由鉤子函數進行攔截或處理。路由鉤子函數是Vue Router提供的一種機制，可以在路由發生變化之前或之后觸發，常用的鉤子函數有beforeEach、beforeResolve、afterEach。

//全局路由鉤子函數
router.beforeEach((to, from, next) =>{
//to：跳轉的路由對象
//from：當前路由對象
//next：繼續執行路由跳轉
console.log('beforeEach:', to.path)
next()
})
//組件路由鉤子函數
export default {
beforeRouteEnter (to, from, next) {
console.log('beforeRouteEnter:', to.path)
next()
},
beforeRouteLeave (to, from, next) {
console.log('beforeRouteLeave:', from.path)
next()
}
}

在Vue Router中，路由鉤子函數分為全局路由鉤子函數和組件路由鉤子函數。全局路由鉤子函數適用于所有路由，組件路由鉤子函數只對組件所在的路由有效。beforeEach鉤子函數可以用來進行路由攔截或根據用戶權限進行路由跳轉。beforeRouteEnter和beforeRouteLeave鉤子函數則可以用來在組件渲染之前或之后執行一些任務，例如加載數據、保存狀態等。