Vue Router 4 is a new feature to look forward to

The article comes from the public number: front-end full stack developer, author Zhang Zhang

Vue Router 4 is currently in beta. Let's take a look at some of the cool features in this new release.

Vue3 support

Vue 3 introduces the 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 the createRouter API, which creates an instance of a router 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 Vue Router versions, you could set the mode option to set the mode mode for navigation.

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 reloading the page.

src/router/index.js

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

In Vue Router 4 these patterns have been abstracted into the module and can be imported and assigned to the new history option. This extra flexibility allows you to customize the implementation of your route history as needed.

src/router/index.js

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


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

Dynamic routing

When a route runs with the new .addRoute method, Vue Router 4 will allow you to add dynamic routes.

This may not be a feature you use every day, but there are some interesting use cases. For example, if you are creating a user interface for a file system application and want to dynamically add paths, 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 next

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

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

After the custom logic runs, 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 such convenient shorthand as below.

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


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

summary

These are just some of the new features added to Version 4. You can learn more in the Vue Router Next repository.

Thanks to Eduardo and the team for their tremendous efforts for Vue Router 4!

That's what W3Cschool编程狮 has to say about the new features Vue Router 4 is looking forward to, and I hope it's helpful.