[[399415]]

Vue Router 4 已經(jīng)發(fā)布了，我們來(lái)看看新版本中有哪些很酷的特性。

Vue3 支持

Vue 3 引入了createApp API，該API更改了將插件添加到Vue實(shí)例的方式。因此，以前版本的Vue Router將與Vue3不兼容。

Vue Router 4 引入了createRouter API，該API創(chuàng)建了一個(gè)可以在Vue3中安裝 router 實(shí)例。

// 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 選項(xiàng)

在 Vue Router的早期版本中，我們可以mode 屬性來(lái)指定路由的模式。

hash 模式使用URL哈希來(lái)模擬完整的URL，以便在URL更改時(shí)不會(huì)重新加載頁(yè)面。history 模式利用 HTML5 History API 來(lái)實(shí)現(xiàn)URL導(dǎo)航，也是無(wú)需重新加載頁(yè)面。

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

在Vue Router 4中，這些模式已被抽象到模塊中，可以將其導(dǎo)入并分配給新的history 選項(xiàng)。這種額外的靈活性讓我們可以根據(jù)需要自定義路由器。

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

動(dòng)態(tài)路由

Vue Router 4 提供了addRoute方法實(shí)現(xiàn)動(dòng)態(tài)路由。

這個(gè)方法平時(shí)比較少用到，但是確實(shí)有一些有趣的用例。例如，假設(shè)我們要為文件系統(tǒng)應(yīng)用程序創(chuàng)建UI，并且要?jiǎng)討B(tài)添加路徑。我們可以按照以下方式進(jìn)行操作：

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

我們還可以使用以下相關(guān)方法：

• removeRoute
• hasRoute
• getRoutes

導(dǎo)航守衛(wèi)可以返回值并非next

導(dǎo)航守衛(wèi)是Vue Router的鉤子，允許用戶(hù)在跳轉(zhuǎn)之前或之后運(yùn)行自定義邏輯，例如 beforeEach，beforeRouterEnter等。

它們通常用于檢查用戶(hù)是否有權(quán)訪問(wèn)某個(gè)頁(yè)面，驗(yàn)證動(dòng)態(tài)路由參數(shù)或銷(xiāo)毀偵聽(tīng)器。

在版本4中，我們可以從hook 方法中中返回值或Promise。這樣可以方便快捷地進(jìn)行如下操作：

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

這些只是版本4中添加的一些新特性，大家可以到官網(wǎng)去了解一下更多的信息。

~完，我是前端小智，去保建了，我們下期見(jiàn)~

作者：Matt Maribojoc 譯者：前端小智 來(lái)源：stackabuse

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

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。