Vue Router中的编程式导航是如何使用的？

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

// 使用Vue Router插件
Vue.use(VueRouter)

// 创建Vue Router实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

// 注入Vue实例
new Vue({
  router,
  el: '#app',
  // ...
})

// template
<template>
  <div>
    <button @click="goAbout">Go to About</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

// template
<template>
  <div>
    <button @click="replaceAbout">Replace with About</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    replaceAbout() {
      this.$router.replace('/about')
    }
  }
}
</script>

// template
<template>
  <div>
    <button @click="goBack">Go Back</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>