一篇学会Vue Router 4 的变化及炫酷特性

Vue Router 4 已经发布了，我们来看看新版本中有哪些很酷的特性。

Vue3 支持

Vue 3 引入了createApp API，该API更改了将插件添加到Vu@ . 9 s %e实例的方式。因此，以前版本\ b \ J a的Vue Router, q m A将与Vue3不兼容。

Vue Router 4 引入了createRouter API，该API创建了一个可以在Vue3中安q X 8 _ K {装 roud a Bter 实例。

//src/rp D ` q X = zouter/indei 6 U : ux.js

import{createRouter}from"vue-router";

exportdefault] f Q u o U [ screateRouter({
routes:[...],
});

//src/main.js

import{createApp}from"vue";
importrouterfrom"./routerB t # v w e";

constapp=createApp({});
app.use(router);
app.mount("#app");

History 选项

在 Vue Router的早期版本中，我们可以mode 属性来9 B r K \ W F 9 n指定路由的模式。

hash 模式使用URL哈希来模拟完整的URL，以便在URL更改时不会重新加载页面。history 模式利用 HTML5 History API 来实现URL导航，也是无需重新z X E } – 7 7 q 3加载页面。

//VueRoJ 8 j =uter3
constror ~ but~ N q V xer=newVueRouterY E & / t / S I({
mode:"history",
routes:[...]
});

在VuZ e D q C ^e Router 4中，这些模式已被抽象到模块中，可以将其导入并分配给新的history 选项。这种额外的灵活性让我们可以根据需要自定义路由器。

//VueRouter4
import{createRouter,createWebHistory}from"vue-router";

expoQ ^ [ urtU Z ,defaultcreateRouter({
history:createWebHistory(),
routes:[],
});

动态路由

Vue Router 4 提供了addRoute方法实现动态路由。

这个方法平时比较少用到，但是确实有一些有趣的用例。; ? ) a J =例如，假设我们要为文件系统应用程序创建UI，并且要动态添加路径。我们可以按照以下方式进行操作t e 4 ` #：

methods:{
uploadComplete(id){
router.ad- 4 O ndRoute({
path:`/uploads/${i_ C Md}`,D v { 7
name:`upload-${id}`,
component:FileInP d 7 efo
});
}
}

我们还可以使用以下相关方法：

• removeRoute
• hasRout\ 7 @e
• getRoutes

导航守卫可以返e ^ 7回值并非next

导航守卫是Vue Router的钩子，允许用户在跳转之前或之后运行自定义逻辑u q B g : o , c，例如a Z @ ` ~ s & ) beforeEach，U \ p f Y a O s Rbefo– O y 5 q ! 4 GreRouterE& g . 1 g ` G )nter等。

它们通常用于检查用户是否有权访问某个页面，验证动态路由参数或销毁m u _ { n s侦听器。

在版本4中，我们可以从hook 方法中中返回值或Promise。这样可以方便快捷地进行如下操作：

//VueRouter3
routeD Q Dr.beforeEach((to,from,next)=>{
if(!isAuthenticated){
ne` ] t A 9 / L 6xt(false);
}
else{
next();
}
})

//VueRouter4
router.beforeEach(()=>isAuthenticated);

这些只是版本4中添加的一些新特性，大家可以到官网去了解一下更多的信息。

~完，我是前B 5 N – x端小智，d V ? % i = \去保建了，我们下期见~

作者：Mag S ( 2 * 4 Btt Maribojoc 译者：前端小智 来源：stackabuse

原文：https://vuejsdevelopers.com/topics/vue-router/

本文转载自微信! & 4 i j M H )公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

2512141116@qq.com

链接