Dieser Artikel zeigt Ihnen die coolen Funktionen in Vue Router4

In diesem Artikel erfahren Sie mehr über die coolen Funktionen von Vue Router4. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vue Router 4 wurde veröffentlicht. Schauen wir uns an, welche coolen Funktionen in der neuen Version enthalten sind. [Verwandte Empfehlung: „vue.js Tutorial“]

Vue3 unterstützt

Vue 3 führt die API createApp ein, die die Art und Weise ändert, wie Plugins zu Vue-Instanzen hinzugefügt werden. Daher sind frühere Versionen von Vue Router nicht mit Vue3 kompatibel. 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 模式使用URL哈希来模拟完整的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

Vue Router 4 führt die API createRouter ein, die eine Router-Instanz erstellt, die in Vue3 installiert werden kann.

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

// Vue Router 4
router.beforeEach(() => isAuthenticated);

rrreee

History-Option

In früheren Versionen von Vue Router konnten wir den Routing-Modus mit dem Attribut mode angeben. hash-Modus verwendet URL-Hashing, um die vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert. Der history-Modus verwendet die HTML5-History-API, um die URL-Navigation zu implementieren, ohne die Seite neu zu laden.

rrreee

In Vue Router 4 wurden diese Muster in Module abstrahiert, die importiert und der neuen Option history zugewiesen werden können. Diese zusätzliche Flexibilität ermöglicht es uns, den Router nach Bedarf anzupassen.

rrreee

Dynamisches Routing

Vue Router 4 bietet die Methode addRoute zur Implementierung dynamischen Routings.

Diese Methode wird selten verwendet, bietet aber einige interessante Anwendungsfälle. Nehmen wir zum Beispiel an, wir möchten eine Benutzeroberfläche für eine Dateisystemanwendung erstellen und Pfade dynamisch hinzufügen. Wir können es wie folgt tun: rrreee

Wir können auch die folgenden verwandten Methoden verwenden: 🎜

• removeRoute
• hasRoute
• getRoutes

🎜Navigation Guard kann einen anderen Wert als next zurückgeben 🎜🎜🎜Navigation Guard ist ein Hook von Vue Router, der es Benutzern ermöglicht, benutzerdefinierte Logik vor oder nach einem auszuführen springen. Zum Beispiel beforeEach, beforeRouterEnter usw. 🎜🎜Sie werden normalerweise verwendet, um zu überprüfen, ob der Benutzer die Berechtigung zum Zugriff auf eine Seite hat, dynamische Routenparameter zu validieren oder Listener zu zerstören. 🎜🎜In Version 4 können wir Werte oder Promise von Hook-Methoden zurückgeben. Dadurch können Sie die folgenden Vorgänge schnell und bequem ausführen: 🎜rrreee🎜Dies sind nur einige der neuen Funktionen, die in Version 4 hinzugefügt wurden. Sie können die 🎜offizielle Website🎜 besuchen, um mehr zu erfahren. 🎜🎜🎜Englische Originaladresse: https://vuejsdevelopers.com/topics/vue-router/🎜🎜Autor: Matt Maribojoc🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDieser Artikel zeigt Ihnen die coolen Funktionen in Vue Router4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!