首先，我們來了解一下Vue中的$route和$router。在Vue中，$router負責存儲路由信息，而$route則表示當前路由的信息，包括當前路由的路徑、參數、查詢等等。

// $router示例
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
})
// $route示例
export default {
methods: {
goToHome() {
this.$router.push('/home')
},
goToAbout() {
this.$router.push('/about')
}
}
}

了解了它們的作用，我們來看看它們的用法。在Vue中定義路由時，需要先創建一個VueRouter實例，并通過routes配置選項定義路由表。在路由表中，每個路由都是一個對象，包含path和component屬性，分別表示路徑和對應的組件。

const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
})

當使用$route時，可以通過$route.path獲取當前路由的路徑，通過$route.params獲取路由參數，通過$route.query獲取查詢參數。

// $route示例
export default {
created() {
console.log(this.$route.path) // 輸出當前路由的路徑
console.log(this.$route.params) // 輸出當前路由的參數
console.log(this.$route.query) // 輸出當前路由的查詢參數
}
}

當使用$router時，可以通過$router.push()方法進行路由跳轉，也可以通過$router.replace()方法進行路由替換。

// $router示例
export default {
methods: {
goToHome() {
this.$router.push('/home') // 跳轉到首頁
},
goToAbout() {
this.$router.replace('/about') // 替換當前路由為關于頁面
}
}
}

除了$router.push()和$router.replace()方法，還有一些其他的方法和屬性可供使用。例如，$router.go()方法可以進行路由前進和后退操作，$router.currentRoute屬性可以獲取當前路由的信息。

// $router示例
export default {
methods: {
goToBack() {
this.$router.go(-1) // 后退一步
}
},
created() {
console.log(this.$router.currentRoute) // 輸出當前路由的信息
}
}

總的來說，$route和$router是Vue中非常重要的概念，它們為我們提供了路由管理的方便方式。我們可以通過$route獲取當前路由的信息，在需要跳轉或替換路由時，可以使用$router提供的方法進行操作。