一、什么是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页面：
“`
Home
原创文章，作者：ICYUA，如若转载，请注明出处：https://www.506064.com/n/317587.html
微信扫一扫 
支付宝扫一扫 