>[success] # 路由跳轉的方法 1. vue 模仿的 `router.push`、`router.replace` 和 `router.go` 是 `window.history.pushState`、`window.history.replaceState` 和 `window.history.go` 的翻版 2. 如果使用的 `options Api` 可以通過 `this` 來調用` this.$router` ,使用`composition Api`可以使用導入`import { useRouter } from "vue-router";` 使用`const router = useRouter();`調用`router `，中包含路由函數的方法例如: **'go' ' back' ' forward' ' push' ' replace'** 等控制路由跳轉一類的方法 3. 當我們使用點擊`<router-link>`時，內部會調用這個方法，所以點擊`<router-link :to="...">`相當于調用`router.push(...)` 4. ` <router-link :to="..." replace>` 等同` router.replace(...)` >[danger] ##### 使用push 1. push 使用形式可以分為對象形式和字符串 2. 注意`push `是在 `history `棧添加一個新的記錄，因此當使用后退功能的時候，可以后退到上一個網址 ~~~ // 字符串路徑 router.push('/users/eduardo') // 帶有路徑的對象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上參數，讓路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 帶查詢參數，結果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 帶 hash，結果是 /about#team router.push({ path: '/about', hash: '#team' }) ~~~ * 其中 `/user/:id` 這類路由如果使用對象形式，提供了`path`，`params`會被忽略，需要提供組件命，或者可以采用拼接的形式，類型（如 undefined、false 等）都將被自動字符串化。對于可選參數，你可以提供一個空字符串（""）來跳過它 ~~~ const username = 'eduardo' // 我們可以手動建立 url，但我們必須自己處理編碼 router.push(`/user/${username}`) // -> /user/eduardo // 同樣 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的話，使用 `name` 和 `params` 從自動 URL 編碼中獲益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能與 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user ~~~ >[danger] ##### replace 1. `replace`使用形式和`push `一樣不同點在，它在導航時不會向 history 添加新記錄 >[danger] ##### go ~~~ // 向前移動一條記錄，與 router.forward() 相同 router.go(1) // 返回一條記錄，與 router.back() 相同 router.go(-1) // 前進 3 條記錄 router.go(3) // 如果沒有那么多記錄，靜默失敗 router.go(-100) router.go(100) ~~~ >[info] ## 等待導航結果 ??? 場景暫時沒想到 [# 等待導航結果](https://router.vuejs.org/zh/guide/advanced/navigation-failures.html#%E6%A3%80%E6%B5%8B%E5%AF%BC%E8%88%AA%E6%95%85%E9%9A%9C)