vue-router 编程式的导航

2019年5月4日12:27:44 发表评论 13 阅读

vue-router开发中除了使用 <router-link> 来创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

要想导航在不同的 URL中使用,则使用( router.push ) 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击IE的后退按钮时,就会回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以,点击 <router-link :to="..."> 就等于调用了 router.push(...)。

 

声明式编程式
<router-link :to="...">router.push(...)

该方法参数可以是一个字符串路径,或者是一个描述地址的对象。例如:

router.replace(location)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace(location)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

 

声明式编程式
<router-link :to="..." replace>router.replace(...)

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

例子

操作 History

也许你已经注意到了 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 还有 window.history.go好像实际上它们确实是效仿 window.history API 的。

如果你已经熟悉 Browser History APIs,那么在 vue-router 中操作 history 是一个非常简单的事情。

还有值得提的,vue-router 的导航方法 (push、 replace、 go) 在各类路由模式(history、 hash 和 abstract)下表现一致。

  • 微信号:sqymail
  • 微信扫一扫欢迎加我为好
  • weinxin
  • 交流QQ群号:248249544
  • IntelliJ IDEA,Java 技术交流
  • weinxin

发表评论

您必须登录才能发表评论!