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

This article focuses on "what are the new features of Vue Router 4". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the new features of Vue Router 4.

Vue3 support

Vue 3 introduces createApp API, which changes the way plug-ins are added to Vue instances. For this reason, previous versions of Vue Router will not be compatible with Vue 3.

Vue Router 4 introduces createRouter API to create a router instance that can be installed with Vue 3.

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 previous versions of Vue Router, you could set the mode option to set the navigation mode.

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

Src/router/index.js:

/ / 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 you to customize the implementation of routing history as needed.

Src/router/index.js

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

Dynamic routing

Vue Router 4 will allow you to add dynamic routes when routes are run using the new .addRoute method.

This may not be a feature you use every day, but there are some interesting use cases. For example, suppose you are creating a user interface for a file system application and want to add paths dynamically, you can do this:

Src/components/FileUploader.vue:

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

You can also use the following related methods:

RemoveRoute

HasRoute

GetRoutes

The navigation guard can return a value instead of a next

Navigation guards are Vue Router hooks that allow users to run custom logic, such as beforeEach, beforeRouterEnter, and so on, before or after navigation events.

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

After the custom logic runs, the next callback is used to confirm the route, declare an error, or redirect.

In version 4, you can return a value or Promise from the hook instead. This will allow for convenient shorthand like the one below.

/ / Vue Router 3 router.beforeEach ((to, from, next) = > {if (! isAuthenticated) {next (false);} else {next ();}}) / / Vue Router 4 router.beforeEach (() = > isAuthenticated). At this point, I believe you have a deeper understanding of what are the new features of Vue Router 4. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.