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

Vue Router 4 早已公布了，大家讨论一下最新版本中有什么很帅的特点。

Vue3 适用

Vue 3 引进了createApp API，该API变更了将软件加上到Vue案例的方法。因而，之前版本号的Vue Router将与Vue3兼容问题。

Vue Router 4 引进了createRouter API，该API建立了一个能够在Vue3中安裝 router 案例。

 

  
// src/router/index.js 
  
 
  
import { createRouter } from "vue-router"; 
  
 
  
export default createRouter({ 
  
  routes: [...], 
  
}); 
 

 

  
// src/main.js 
  
 
  
import { createApp } from "vue"; 
  
import router from "./router"; 
  
 
  
const app = createApp({}); 
  
app.use(router); 
  
app.mount("#app"); 
 

History 选择项

在 Vue Router的初期版本号中，我们可以mode 特性来特定路由器的方式。

hash 方式应用URLhach来仿真模拟详细的URL，便于在URL变更时不容易重新加载网页页面。history 方式运用 HTML5 History API 来完成URL导航栏，也是不用重新加载网页页面。

 

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

在Vue Router 4中，这种方式已被抽象性到控制模块中，能够将其导进并分派给新的history 选择项。这类附加的协调能力使我们能够依据必须自定无线路由器。

 

  
// Vue Router 4 
  
import { createRouter, createWebHistory } from "vue-router"; 
  
 
  
export default createRouter({ 
  
  history: createWebHistory(), 
  
  routes: [], 
  
}); 
 

动态路由

Vue Router 4 出示了addRoute方式完成动态路由。

这一方式平常较为少采用，可是的确有一些有意思的测试用例。比如，假定我们要为系统文件应用软件建立UI，而且要动态性加上途径。我们可以依照下列方法开展实际操作：

 

  
methods: { 
  
  uploadComplete (id) { 
  
    router.addRoute({ 
  
      path: `/uploads/${id}`, 
  
      name: `upload-${id}`, 
  
      component: FileInfo 
  
    }); 
  
  } 
  
} 
 

大家还能够应用下列有关方式：

• removeRoute
• hasRoute
• getRoutes

导航栏守护能够传参并不是next

导航栏守护是Vue Router的勾子，容许客户在自动跳转以前或以后运作自定逻辑性，比如 beforeEach，beforeRouterEnter等。

他们一般 用以检查用户是不是有权利浏览某一网页页面，认证动态路由主要参数或消毁侦听器。

在版本号4中，我们可以从hook 方式中传参或Promise。那样能够省时省力地开展以下实际操作：

 

  
// Vue Router 3 
  
router.beforeEach((to, from, next) => { 
  
  if (!isAuthenticated) { 
  
    next(false); 
  
  } 
  
  else {  
  
    next(); 
  
  } 
  
}) 
  
 
  
// Vue Router 4 
  
router.beforeEach(() => isAuthenticated); 
 

这种仅仅版本号4中加上的一些新特点，大伙儿能够到官方网站去了解一下大量的信息内容。

~完，我是前面小智，去保建了，大家下一期见~

创作者：Matt Maribojoc 译员：前面小智 来源于：stackabuse

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