本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章和大家一下了解下Vue Router4中的酷炫功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Vue Router 4 已经发布了,我们来看看新版本中有哪些很酷的特性。【相关推荐:《vue.js教程》】
Vue3 支持
Vue 3 引入了createApp
API,该API更改了将插件添加到Vue实例的方式。 因此,以前版本的Vue Router将与Vue3不兼容。
Vue Router 4 引入了createRouter
API,该API创建了一个可以在Vue3中安装 router 实例。
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 |
|
History 选项
在 Vue Router的早期版本中,我们可以mode
属性来指定路由的模式。
hash
模式使用URL哈希来模拟完整的URL,以便在URL更改时不会重新加载页面。 history
模式利用 HTML5 History API 来实现URL导航,也是无需重新加载页面。
1 2 3 4 5 |
|
在Vue Router 4中,这些模式已被抽象到模块中,可以将其导入并分配给新的history
选项。 这种额外的灵活性让我们可以根据需要自定义路由器。
1 2 3 4 5 6 7 |
|
动态路由
Vue Router 4 提供了addRoute
方法实现动态路由。
这个方法平时比较少用到,但是确实有一些有趣的用例。 例如,假设我们要为文件系统应用程序创建UI,并且要动态添加路径。 我们可以按照以下方式进行操作:
1 2 3 4 5 6 7 8 9 |
|
我们还可以使用以下相关方法:
- removeRoute
- hasRoute
- getRoutes
导航守卫可以返回值并非next
导航守卫是Vue Router的钩子,允许用户在跳转之前或之后运行自定义逻辑,例如 beforeEach
,beforeRouterEnter
等。
它们通常用于检查用户是否有权访问某个页面,验证动态路由参数或销毁侦听器。
在版本4中,我们可以从hook 方法中中返回值或Promise。 这样可以方便快捷地进行如下操作:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
这些只是版本4中添加的一些新特性,大家可以到官网去了解一下更多的信息。
英文原文地址:https://vuejsdevelopers.com/topics/vue-router/
作者:Matt Maribojoc
更多编程相关知识,请访问:编程视频!!
以上就是一文带你看看Vue Router4中的酷炫功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者