詳解router.replace()

一、概述

在Vue.js中，router.replace()方法用於修改路由，其會把當前路由替換為指定的路由，而不是添加一條新的路由。也就是說，歷史記錄中不會保存當前路由。

router.replace()方法常用於一些登錄或註銷等需要重定向頁面的場景，如登錄之後跳轉到首頁；用戶註銷之後跳轉到登錄界面。

二、語法

該方法的語法如下：

// 對象模式
router.replace(location, onComplete?, onAbort?)

// 字元串模式
router.replace(path, onComplete?, onAbort?)

參數：

• location: 一個描述目標位置的對象，可以包含下列屬性：
  • path: 字元串，對應要跳轉到的路由路徑
  • query: 對象，表示跳轉時要攜帶的查詢參數
  • hash: 字元串，表示跳轉時要攜帶的 hash 值
• path: 字元串，對應要跳轉到的路由路徑。
• onComplete: 可選的函數，在導航成功完成 (即在所有的非同步鉤子被解析之後) 時被調用。
• onAbort: 可選的函數，在導航被終止時調用，例如在失去網路連接時。

三、用法示例

1. 對象模式的用法示例

下面的示例通過對象模式的形式使用router.replace()方法，跳轉到home頁面，同時傳遞了一個查詢參數（name:'Tom'） 。

router.replace({ path: '/home', query: { name: 'Tom' } })

2. 字元串模式的用法示例

下面的示例通過字元串模式的形式使用router.replace()方法，跳轉到home頁面，同時傳遞了一個查詢參數（name:'Tom'）。

router.replace('/home?name=Tom')

3. 處理導航失敗的回調函數

可以在調用router.replace()時傳遞一個可選的導航失敗的回調函數：

router.replace('/home', () => {
  // 成功跳轉到home頁面時會觸發該回調函數
}, error => {
  // 導航失敗（如沒有許可權等）時會觸發該回調函數
})

4. 完整的使用示例

下面是一個完整的router.replace()方法的使用示例：

<template>
  <div>
    <button @click="replaceHome">點擊跳轉到home頁</button>
  </div>
</template>

<script>
export default {
  methods: {
    replaceHome() {
      this.$router.replace({ path: '/home', query: { name: 'Tom' } }, () => {
        // 成功跳轉到home頁面時會觸發該回調函數
        console.log('跳轉成功')
      }, error => {
        // 導航失敗（如沒有許可權等）時會觸發該回調函數
        console.log('跳轉失敗')
      })
    }
  }
}
</script>

四、注意事項

• router.replace()方法不會將新的 URL 添加到瀏覽器歷史記錄中
• 如果要保留之前的頁面狀態，建議使用 router.push() 方法
• 在單頁應用中使用 router.replace() 方法時，頁面不會重新載入，而是利用了 Vue.js 的組件復用機制