Cool Features of Vue Router 4

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

Vue 3 support

Vue 3 has introduced the createApp API which changes the way plugins are added to a Vue instance. For this reason, past versions of Vue Router will not be compatible with Vue 3.

Vue Router 4 introduces the createRouter API that creates an instance of the router that is installable 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've had the option to select a "mode" of navigation simulation.

hash mode uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. history mode utilizes the HTML5 History API to achieve URL navigation without a page reload.

src/router/index.js

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

In Vue Router 4, these modes have been abstracted into modules that can be imported and assigned to the new history option. This additional flexibility will allow you to customize your router history implementation if you need to.

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 while the router is running with the new .addRoute method.

This is probably not a feature you'd use every day, but it does have some interesting use cases. For example, say you're creating a UI for a filesystem app and you want to add paths on the fly. Here how you might do that:

src/components/FileUploader.vue

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

You can also use these related methods:

• removeRoute
• hasRoute
• getRoutes

Read more in the Dynamic Routing RFC.

Navigation guards can return value instead of next

Navigation guards are hooks for Vue Router that allow users to run custom logic before or after navigation events e.g. beforeEach, beforeRouterEnter, etc.

They're often used to check if a user has access to a certain page, to validate a dynamic route parameter, or to destroy listeners.

Once the custom logic has run, 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 handy shorthands like the following:

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

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

Read more about this in the Async Navigation Guards RFC.

Wrap up

These are just a few of the new features being added in version 4. You can learn more in the Vue Router Next repo.

Thanks to Eduardo and team for your great effort on Vue Router 4!