编程式的导航
除了使用<router-link>
创建a
标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。
导航到不同的位置
通过在历史堆栈中推送一个entry,以编程方式导航到一个新的 URL。
函数签名:
router.push(to:RouteLocationRaw):Promise<NavigationFailure | void | undefined>
参数 | 类型 | 描述 |
---|---|---|
to | RouteLocationRaw | 要导航到的路由地址 |
想要导航到不同的 URL,则使用router.push
方法。这个方法会向history栈添加一个新的记录。所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
注意:在 Vue 实例内部,你可以通过$router访问路由实例。因此你可以调用this.$router.push。
当你点击<router-link>
时,这个方法会在内部调用,所以说,点击<router-link :to="...">
等同于调用router.push(...)
。
声明式 | 编程式 |
---|---|
<router-link :to="..."> | router.push(...) |
router.push()
方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({path : '/users/eduardo' }) // 带查询参数,结果是 /register?plan=private router.push({path : '/register',query : { plan: 'private' } }) // 带 hash,结果是 /about#team router.push({path : '/about',hash : '#team' }) // 命名的路由,并加上参数,让路由建立 url router.push({name : 'user',params : { username: 'eduardo' } })
path 能与query 一起搭配使用。但是path 不能与params 一起搭配使用,如果提供了path 选项,那么params 选项会被忽略。
你需要提供路由的name
或手写完整的带有参数的path
:
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
由于属性to
与router.push
接受的对象种类相同,所以两者的规则完全相同。
router.push
和所有其他导航方法都会返回一个Promise,让我们可以等到导航完成后才知道是成功还是失败。
替换当前位置
通过替换历史堆栈中的当前entry,以编程方式导航到一个新的 URL。
函数签名:
router.replace(to:RouteLocationRaw):Promise<NavigationFailure | void | undefined>
参数 | 类型 | 描述 |
---|---|---|
to | RouteLocationRaw | 要导航到的路由地址 |
跟router.push
很像,唯一的不同就是,它不会向history添加新记录,而是替换当前的条目。
声明式 | 编程式 |
---|---|
<router-link :to="..."replace> | router.replace(...) |
也可以直接在传递给router.push
的routeLocation中增加一个属性replace: true
:
router.push({ path: '/home', replace: true }) // 相当于 router.replace({ path: '/home' })
横跨历史
允许你在历史中前进或后退。
函数签名:
router.go(n:number):void
参数 | 类型 | 描述 |
---|---|---|
n | number | 相对于当前页面,你要移动到的历史位置 |
这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n)
。
向前移动一条记录:
router.go(1) 等价 router.forward()
返回一条记录:
router.go(-1) 等价 router.back()
前进 3 条记录
router.go(3)
如果没有那么多记录,静默失败
router.go(-100) router.go(100)
操作 History
用于路由实现历史记录。大多数 web 应用程序都应该使用createWebHistory()
,但它要求正确配置服务器。你还可以使用createWebHashHistory()
的基于 hash 的历史记录,它不需要在服务器上进行任何配置,但是搜索引擎根本不会处理它,在 SEO 上表现很差。
函数签名:
history:RouterHistory
createRouter({ history:createWebHistory() , // 其他配置... })
你也许注意到router.push
、router.replace
和router.go
跟window.history.pushState
、window.history.replaceState
和window.history.go
好像,实际上它们确实是效仿window.history
API 的。
因此,如果你已经熟悉 Browser History APIs,那么在 Vue Router 中操作 history 就是超级简单的。
值得一提的是,无论在创建路由器实例时传递什么样的history配置,Vue Router的导航方法(push
、replace
、go
),都能始终如一地工作。