在Web開發中，我們經常需要根據URL的變化來動態地顯示不同的內容。Vue.js是一個面向數據驅動視圖的JavaScript框架，Vue的路由功能可以幫助我們實現URL變化的監聽，從而達到動態顯示不同內容的目的。

Vue的路由功能由Vue Router提供，我們需要先安裝和引入Vue Router來使用路由功能。Vue Router可以通過路由表配置路由，這個路由表將URL字符串映射到某個組件，然后通過router-view組件來渲染這個組件。當URL發生變化時，Vue Router會自動匹配路由表中對應的URL字符串，然后渲染對應的組件。

// main.js中引入Vue Router
import VueRouter from 'vue-router'
// 創建路由實例
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', component: User }
]
})
// 注冊路由實例
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

路由表中的path屬性表示URL字符串，component屬性表示該URL對應的組件。在上面的代碼中，我們定義了三個路由，當URL為'/'時，渲染Home組件，當URL為'/about'時，渲染About組件，當URL為'/user/:id'時，渲染User組件并傳入參數id。

通過Vue Router提供的$route全局對象，我們可以監聽URL的變化事件。當URL發生變化時，$route對象會被更新，我們可以利用這個對象來進行相應的操作。$route對象有多個屬性，包括path、params、query等。

// 監聽URL變化事件
export default {
created() {
this.$watch('$route', (to, from) =>{
console.log('路由從' + from.path + '變為' + to.path)
})
}
}

在上面的代碼中，我們首先通過created鉤子函數在組件創建時監聽$route對象的變化，當$route對象發生變化時，輸出路由變化信息到控制臺。

除了$route對象之外，Vue Router還提供了一些其他的方法和屬性來方便我們使用路由功能。例如，$router.push()方法可以用來編程式地跳轉到某個URL，$router.back()方法可以用來返回到上一頁。

// 編程式路由跳轉
this.$router.push('/about')
// 返回上一頁
this.$router.back()

總之，Vue Router提供了強大的路由功能，可以幫助我們實現URL變化的監聽和動態顯示不同內容的功能。借助Vue Router提供的$route對象、$router對象和一些方法和屬性，我們可以輕松地實現復雜的路由功能。