一、什麼是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/zh-tw/n/317587.html
微信掃一掃 
支付寶掃一掃 