在開發(fā)Web應(yīng)用程序時，當(dāng)用戶與我們的應(yīng)用交互時，會執(zhí)行許多操作，例如單擊某個按鈕、導(dǎo)航到其他頁面等。對于某些時刻，我們需要知道用戶執(zhí)行了哪些操作以及他們正在查看哪些頁面。Vue可以幫助我們做到這一點，它提供了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中，我們可以配置很多路由。路由可以有不同的路徑，每個路徑都會與一個組件相對應(yīng)。例如上述代碼中，'/'表示應(yīng)用程序的根路徑，'/about'表示應(yīng)用程序中的'about'路徑，其中每個路徑都會與一個組件相對應(yīng)。當(dāng)用戶在瀏覽器中輸入這些路徑時，Vue Router就會加載相應(yīng)的組件。

獲取路由路徑在Vue Router中非常容易。可以使用$router對象中的屬性和方法來獲取當(dāng)前的路由路徑。

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

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

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

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

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

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