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 实例。

  1. //src/rp D ` q X = zouter/indei 6 U : ux.js
  2. import{createRouter}from"vue-router";
  3. exportdefault] f Q u o U [ screateRouter({
  4. routes:[...],
  5. });
  1. //src/main.js
  2. import{createApp}from"vue";
  3. importrouterfrom"./routerB t # v w e";
  4. constapp=createApp({});
  5. app.use(router);
  6. 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加载页面。

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

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

  1. //VueRouter4
  2. import{createRouter,createWebHistory}from"vue-router";
  3. expoQ ^ [ urtU Z ,defaultcreateRouter({
  4. history:createWebHistory(),
  5. routes:[],
  6. });

动态路由

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

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

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

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

  • 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。这样可以方便快捷地进行如下操作:

  1. //VueRouter3
  2. routeD Q Dr.beforeEach((to,from,next)=>{
  3. if(!isAuthenticated){
  4. ne` ] t A 9 / L 6xt(false);
  5. }
  6. else{
  7. next();
  8. }
  9. })
  10. //VueRouter4
  11. 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 )公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注