一、什么是Vue-Router Replace

Vue-Router Replace是Vue.js官方的路由管理器，可以方便地实现Web页面的路由控制。Replace方法可以在导航时替换当前页面而不是添加新的记录，这样不会在历史记录中留下多余的记录，从而更好地控制页面路由。

二、使用Vue-Router Replace

使用Vue-Router Replace很简单，只需要在Vue实例化时引入Vue-Router库并使用即可：

// 引入 Vue 和 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.use(VueRouter)
// 配置路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
]
// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 去掉 "#" 符号
  routes,
})
// 实例化 Vue
new Vue({
  el: '#app',
  router,
})

上面代码中，首先通过import引入Vue和Vue-Router。然后引入各个组件。然后通过Vue.use()安装路由插件，接着配置路由规则。这里设置了三个页面：Home、About、Contact。然后创建路由实例，启用history模式去掉 "#" 符号。最后实例化Vue，注入路由实例。路由就已经完成，并且启用了Replace模式。下面详细了解一下这三个组件。

三、路由组件

1. Home.vue

这个组件只是一个简单的页面，里面包含一个按钮跳转到About页面：

<template>
  <div>
    <h2 id="title-1">Home</h2>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>
<script>
export default {
  methods: {
    goToAbout() {
      this.$router.replace('/about')
    },
  },
}
</script>

代码很简单，只有一个Go to About的按钮。当点击按钮时，用this.$router.replace()方法切换页面到/about路由。

2. About.vue

关于页面也很简单，只显示了一个标题和返回主页的链接：

<template>
  <div>
    <h2 id="title-2">About</h2>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

这里使用router-link组件实现“返回”链接，to属性指向"/"表示返回主页面。

3. Contact.vue

联系页面也很简单，只显示了一个标题和返回主页的链接：

<template>
  <div>
    <h2 id="title-3">Contact</h2>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

同样也是使用router-link组件实现返回链接到主页。

四、总结

Vue-Router Replace提供了很好的路由控制能力，可以非常方便地控制页面导航，同时还提高了Web应用的性能。如果你还没有使用Vue-Router Replace，鼓励你新建一个项目并尝试一下。

Vue-Router Replace详解