Vue Router 4的一些很酷的功能

开发 前端
Vue Router 4目前处于测试阶段。让我们看一下这个新版本中的一些很酷的功能。

Vue Router 4目前处于测试阶段。让我们看一下这个新版本中的一些很酷的功能。

Vue3支持

Vue 3引入了 createApp API,它改变了将插件添加到Vue实例的方式。由于这个原因,过去版本的Vue Router将不兼容Vue 3。

Vue Router 4引入了 createRouter API,可以创建一个可与Vue 3一起安装的路由器实例。

src/router/index.js:

  1. import { createRouter } from "vue-router"; 
  2.  
  3. export default createRouter({ 
  4.   routes: [...], 
  5. }); 

src/main.js:

  1. import { createApp } from "vue"; 
  2. import router from "./router"; 
  3.  
  4. const app = createApp({}); 
  5. app.use(router); 
  6. app.mount("#app"); 

History选项

在之前的Vue Router版本中,你可以设置 mode 选项设置导航的模式。

hash 模式利用URL hash来模拟完整的URL,这样当URL发生变化时,页面不会被重新加载。history 利用HTML5 History API来实现URL导航,而不需要重新加载页面。

src/router/index.js:

  1. // Vue Router 3 
  2. const router = new VueRouter({ 
  3.   mode: "history", 
  4.   routes: [...] 
  5. }); 

在Vue Router 4中,这些模式已被抽象到模块中,可以将其导入并分配给新的 history 选项。这种额外的灵活性使你可以根据需要自定义路由历史记录的实现。

src/router/index.js

  1. // Vue Router 4 
  2. import { createRouter, createWebHistory } from "vue-router"; 
  3.  
  4. export default createRouter({ 
  5.   history: createWebHistory(), 
  6.   routes: [], 
  7. }); 

动态路由

当路由使用新的 .addRoute 方法运行时,Vue Router 4将允许你添加动态路由。

这可能不是你每天都会使用的功能,但是确实有一些有趣的用例。例如,假设你正在为一个文件系统应用程序创建一个用户界面,并且希望动态添加路径,你可以这样做:

src/components/FileUploader.vue:

  1. methods: { 
  2.   uploadComplete (id) { 
  3.     router.addRoute({ 
  4.       path: `/uploads/${id}`, 
  5.       name: `upload-${id}`, 
  6.       component: FileInfo 
  7.     }); 
  8.   } 

你还可以使用以下相关方法:

  • removeRoute
  • hasRoute
  • getRoutes

导航守卫可以返回值而不是next

导航守卫是Vue Router的钩子,允许用户在导航事件之前或之后运行自定义逻辑,如 beforeEach、beforeRouterEnter等。

它们通常用于检查用户是否有权限访问某个页面,验证动态路由参数,或者销毁监听器。

自定义逻辑运行后,next 回调用于确认路由、声明错误或重定向。

在第4版中,你可以从钩子中返回一个值或Promise来代替。这将允许像下面这样方便的速记。

  1. // Vue Router 3 
  2. router.beforeEach((to, from, next) => { 
  3.   if (!isAuthenticated) { 
  4.     next(false); 
  5.   } 
  6.   else {  
  7.     next(); 
  8.   } 
  9. }) 
  10.  
  11. // Vue Router 4 
  12. router.beforeEach(() => isAuthenticated); 

总结

这些只是版本4中新增的一些新功能。您可以在Vue Router Next仓库中了解更多信息。

感谢Eduardo和团队为Vue Router 4所做的巨大努力!

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2018-07-30 08:41:48

VueReact区别

2017-08-23 09:26:16

Chromelive 状态代码

2018-09-11 16:15:36

Vue高版本前端

2023-11-09 08:05:40

IDEA开发工具

2009-09-10 16:01:26

介绍LINQ

2021-10-21 06:52:17

Vue3组件 API

2021-05-14 07:35:06

Vue Router 特性变化

2009-11-26 09:40:48

2018-02-23 13:25:49

LinuxVim编辑器

2023-03-17 08:28:17

GPT-4AI

2021-03-03 12:33:31

微软Windows SerInsider

2009-06-18 14:54:52

Spring AOP

2020-02-03 16:03:36

疫情思考

2010-09-28 14:14:19

SQL语句

2016-11-16 21:18:42

android日志

2009-09-21 17:46:25

Hibernate数据

2009-06-25 09:50:32

JSF

2013-07-02 10:18:20

编程编程策略

2011-06-01 16:50:21

JAVA

2013-07-02 09:43:02

编程策略
点赞
收藏

51CTO技术栈公众号