This article will show you the cool features in Vue Router4

This article will let you know about the cool features in Vue Router4. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#Vue Router 4 has been released, let’s take a look at what cool features are included in the new version. [Related recommendations: "vue.js Tutorial"]

Vue3 supports

Vue 3 and introduces the createApp API, This API changes the way plugins are added to Vue instances. Therefore, previous versions of Vue Router will not be compatible with Vue3.

Vue Router 4 introduces the createRouter API, which creates a router instance that can be installed in Vue3.

// 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 Options

In earlier versions of Vue Router, we could mode attribute to specify the mode of routing.

hash mode uses a URL hash to simulate the full URL so that the page does not reload when the URL changes. history mode uses the HTML5 History API to implement URL navigation without reloading the page.

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

In Vue Router 4, these patterns have been abstracted into modules, which can be imported and assigned to new history options. This extra flexibility allows us to customize the router as needed.

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [],
});

Dynamic routing

Vue Router 4 provides the addRoute method to implement dynamic routing.

This method is rarely used, but it does have some interesting use cases. For example, let's say we want to create a UI for a file system application, and we want to add paths dynamically. We can do it as follows:

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

We can also use the following related methods:

• removeRoute
• hasRoute
• getRoutes

Navigation guards can return values ​​that are not next

Navigation guards are hooks for Vue Router that allow users to run customizations before or after a jump Logic, such as beforeEach, beforeRouterEnter, etc.

They are typically used to check if the user has permission to access a page, validate dynamic routing parameters, or destroy listeners.

In version 4, we can return values ​​or Promise from hook methods. This allows you to perform the following operations quickly and easily:

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

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

These are just some of the new features added in version 4. You can go to the official website to learn more.

English original address: https://vuejsdevelopers.com/topics/vue-router/

Author: Matt Maribojoc

More programming related For knowledge, please visit: programming video! !

The above is the detailed content of This article will show you the cool features in Vue Router4. For more information, please follow other related articles on the PHP Chinese website!