使用vue-router怎么实现一个编程式导航

今天就跟大家聊聊有关使用vue-router怎么实现一个编程式导航,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

目前创新互联已为上1000家的企业提供了网站建设、域名、雅安服务器托管网站运营、企业网站设计、高港网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。即:通过js动态的进行导航链接。

一、this.$router.push( )

router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

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

当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(...)。

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

效果:

使用vue-router怎么实现一个编程式导航

使用vue-router怎么实现一个编程式导航

二、this.$router.replace();用法同this.$router.replace()

router.replace(location, onComplete?, onAbort?)

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

使用vue-router怎么实现一个编程式导航

三、this.$router.go()

使用vue-router怎么实现一个编程式导航

小结:

router.push(location)

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

router.replace(location)

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

router.go(n)

看完上述内容,你们对使用vue-router怎么实现一个编程式导航有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站标题:使用vue-router怎么实现一个编程式导航
文章链接:http://myzitong.com/article/pochsi.html