Vue.js是一種用于構建交互式Web界面的漸進性框架。Vue組件可以包含HTML、CSS和JavaScript，并在Vue實例化時進行渲染。在Vue中，按鈕是一種常見的交互元素。我們可以使用Vue的v-on指令來綁定點擊事件，并將按鈕用于路由導航。

<template>
<button v-on:click="gotoPage('/about')">Go to About</button>
</template>
<script>
export default {
methods: {
gotoPage(route) {
this.$router.push(route)
}
}
}
</script>

在上面的代碼中，我們定義了一個包含單個按鈕的Vue組件。當我們點擊該按鈕時，v-on:click指令會調用由gotoPage()方法定義的處理函數。該方法使用Vue Router的push()方法將瀏覽器路由定向到指定的URL路徑（在這種情況下是'/about'）。

請注意，在上面的Vue組件中，我們使用$this.$router訪問Vue Router實例。Vue Router是Vue.js的官方路由管理器，可以幫助我們在單頁應用程序中管理應用程序的組件之間的導航。在大多數情況下，我們需要在Vue應用程序的入口文件（如main.js）中初始化Vue Router：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h =>h(App)
}).$mount('#app')

在上面的代碼中，我們從Vue和App.vue中導入Vue和App組件，并從router.js中導入Vue Router實例。然后，在Vue實例化時（使用new Vue()），我們將router選項傳遞給Vue Router實例，并將應用程序渲染到#app元素中。

在這篇文章中，我們學習了如何使用Vue Router將Vue Button用于路由導航。Vue Button可以很容易地實現客戶端路由轉換，使得我們可以輕松地管理Vue.js應用程序中的不同頁面之間的導航。