>[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)