Vue Router 是 Vue.js 官方的路由管理器。它與 Vue.js 核心深度集成，讓構(gòu)建 SPA 應(yīng)用變得輕而易舉。Vue Router 通過(guò)全局方法 $router 和 $route 讓我們可以在任何組件中訪問(wèn)路由對(duì)象，在這篇文章中我們就來(lái)了解一下全局方法的使用。

在 Vue Router 中，全局方法包括 $router 和 $route。

$router 是 Vue Router 的實(shí)例，可以用它來(lái)導(dǎo)航到不同的頁(yè)面：

export default {
methods: {
goToPage(pageName) {
this.$router.push({ name: pageName })
}
}
}

在上述代碼中，我們定義了一個(gè) goToPage 方法，該方法接受一個(gè)參數(shù) pageName，然后使用 $router.push 方法將用戶(hù)導(dǎo)航到與該頁(yè)面名稱(chēng)相對(duì)應(yīng)的路由。

$route 對(duì)象主要用于訪問(wèn)和監(jiān)視當(dāng)前路由的信息，例如當(dāng)前路徑、參數(shù)和查詢(xún)等：

export default {
computed: {
pageTitle() {
return this.$route.name + ' - My Website'
}
}
}

在上方代碼中，我們定義一個(gè) pageTitle 計(jì)算屬性，該屬性的值是當(dāng)前頁(yè)面名稱(chēng)加上字符串 ' - My Website'。

除了 $router 和 $route，Vue Router 還提供了許多其他全局方法用于程序控制：

• beforeEach(): 在路由改變之前執(zhí)行，可以用于檢查用戶(hù)是否有權(quán)限進(jìn)入該頁(yè)面。
• beforeResolve(): 在路由改變之前執(zhí)行，用于確保異步組件和鉤子函數(shù)都被解析。
• afterEach(): 在路由改變后執(zhí)行，可以用于發(fā)送頁(yè)面完成渲染的消息。

下面是一個(gè)使用 beforeResolve 的示例：

export default {
beforeResolve(to, from, next) {
if (to.name === 'private' && !isAuthenticated()) {
next({ name: 'login' })
}
next()
}
}

在上方代碼中，beforeResolve 鉤子函數(shù)接受三個(gè)參數(shù)：to、from 和 next。在此示例中，我們檢查是否已驗(yàn)證用戶(hù)，如果未驗(yàn)證，則將用戶(hù)重定向到登錄頁(yè)面（通過(guò)調(diào)用 next 方法傳入一個(gè)包含目標(biāo)路由 name 的對(duì)象）。

Vue Router 還提供了許多其他功能，例如動(dòng)態(tài)路由、嵌套路由和路由傳參等。使用全局方法，將使您更輕松地使用 Vue Router 中的所有功能。