Vue-Router Replace详解

一、什么是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页面：

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

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

2. About.vue

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

``` ```

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

3. Contact.vue

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

``` ```

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

四、总结

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