在開(kāi)發(fā)Web應(yīng)用程序時(shí)，當(dāng)用戶與我們的應(yīng)用交互時(shí)，會(huì)執(zhí)行許多操作，例如單擊某個(gè)按鈕、導(dǎo)航到其他頁(yè)面等。對(duì)于某些時(shí)刻，我們需要知道用戶執(zhí)行了哪些操作以及他們正在查看哪些頁(yè)面。Vue可以幫助我們做到這一點(diǎn)，它提供了Router和Vue Router，用于在前端應(yīng)用程序中管理路由。

//路由配置
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () =>import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
})

在Vue Router中，我們可以配置很多路由。路由可以有不同的路徑，每個(gè)路徑都會(huì)與一個(gè)組件相對(duì)應(yīng)。例如上述代碼中，'/'表示應(yīng)用程序的根路徑，'/about'表示應(yīng)用程序中的'about'路徑，其中每個(gè)路徑都會(huì)與一個(gè)組件相對(duì)應(yīng)。當(dāng)用戶在瀏覽器中輸入這些路徑時(shí)，Vue Router就會(huì)加載相應(yīng)的組件。

獲取路由路徑在Vue Router中非常容易?？梢允褂?router對(duì)象中的屬性和方法來(lái)獲取當(dāng)前的路由路徑。

computed: {
currentRoute() {
return this.$route.path
}
}

代碼中的$router對(duì)象用于管理頁(yè)面路由。它有很多方法和屬性，其中我們可以通過(guò)在組件中添加computed屬性來(lái)輕松獲取當(dāng)前路由的路徑。每當(dāng)我們使用路由導(dǎo)航時(shí)，該路徑都會(huì)被更新。

我們還可以使用$route對(duì)象中的其他屬性，例如params、name、query等。例如，如果我們的路由是類似于這樣的‘ /user/:id ’的動(dòng)態(tài)路徑，那么我們可以通過(guò)以下方式來(lái)獲取參數(shù)：

computed: {
userId() {
return this.$route.params.id
}
}

在這種情況下, this.$route.params.id會(huì)返回' id '路由的值。如果我們想要在URL中添加查詢參數(shù)，例如' /about?foo=bar '，那么可以用$router.push()方法來(lái)實(shí)現(xiàn)。如果我們想要獲取查詢參數(shù)，可以使用$route.query對(duì)象來(lái)實(shí)現(xiàn)。

到此為止，我們已經(jīng)完整地了解了Vue Router如何獲取路由路徑。Vue Router是一個(gè)強(qiáng)大的路由管理工具，可以輕松地拓展應(yīng)用程序的功能以及控制關(guān)鍵流程。如上所述，獲取路由路徑的功能在Vue Router中非常簡(jiǎn)單，我們可以隨時(shí)使用$route和$router對(duì)象來(lái)獲取當(dāng)前頁(yè)面的路由路徑和參數(shù)。