Shulou(Shulou.com)06/03 Report--

This article will explain in detail the changes and cool features of Vue Router 4, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Vue Router 4 has been released, so let's take a look at some cool features in the new version.

Vue3 support

Vue 3 introduces createApp API, which changes the way plug-ins are added to the Vue instance. Therefore, previous versions of Vue Router will not be compatible with Vue3.

Vue Router 4 introduces createRouter API, which creates an instance of router 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 option

In earlier versions of Vue Router, we could specify the pattern of the route with the mode attribute.

The hash mode uses a URL hash to simulate the full URL so that the page is not reloaded when the URL changes. The history mode uses HTML5 History API for URL navigation without reloading the page.

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

In Vue Router 4, these schemas have been abstracted into modules that 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 an addRoute method for dynamic routing.

This method is rarely used, but there are some interesting use cases. For example, suppose we want to create a UI for a file system application and add a path dynamically. We can do this in the following ways:

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

We can also use the following related methods:

RemoveRoute

HasRoute

GetRoutes

The navigation guard can return a value other than next

Navigation guards are Vue Router hooks that allow users to run custom logic, such as beforeEach,beforeRouterEnter, before or after the jump.

They are typically used to check whether a user has access to a page, verify dynamic routing parameters, or destroy listeners.

In version 4, we can return a value or Promise from the hook method. This makes it easy and quick to do the following:

/ / 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 for more information.

So much for sharing about the changes and cool features of Vue Router 4. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.