Courses
Vue Foundations Vue Fullstack Vue Enterprise
Articles
Latest Topics
More
Newsletter Sponsorship Discord About

Cool Features of Vue Router 4

Anthony Gore

Anthony Gore | August 18th, 2020 | 2 min read
vue-router
A Closer Look at Vue Router
Matt Maribojoc
A Closer Look at Vue Router

January 27th, 2020

If you want to build a SPA in Vue, you're going to need Vue Router. Learn some more advanced Vue Router techniques in this step-by-step tutorial....

vue.js  vue-router 

The Ultimate AJAX Guide For Vue.js Apps
The Ultimate AJAX Guide For Vue.js Apps

January 20th, 2020

If you want to read or write data from a Vue app, you'll most likely want to use AJAX. This guide compares the most popular approaches....

vue.js  ajax  vue-router  vuex  design patterns 

Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide
Santiago GarcÌa da Rosa
Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide

December 11th, 2017

This tutorial goes through the steps of setting up a server-rendered multi-page app with Vue and Vue Router....

vue.js  vue-router  server-side rendering 

Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App
Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App

November 27th, 2017

In this tutorial you'll learn how to server render a multi-page Vue.js app using Vue Router in a Laravel environment with V8Js...

vue.js  laravel  server-side rendering  vue-router 

Build A Lazy-Load Router With Vue.js And The Latest Browser Features
Build A Lazy-Load Router With Vue.js And The Latest Browser Features

October 30th, 2017

Dynamic module importing is one of the latest JavaScript features to hit the major browsers. In this article I'll demonstrate how you can build a lazy-load router with Vue.js ...

vue.js  components  vue-router  javascript  chrome  web performance 

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps
Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

August 6th, 2017

I see many Laravel apps using AJAX to send the initial application state to a Vue.js client. This extra round-trip to the server delays page interactivity unnecessarily. In th...

vue.js  laravel  vue-router  design patterns 

  • 1
  • 2

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

Table of contents:


    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!


    Anthony Gore

    About Anthony Gore

    I'm Anthony Gore and I'm a web developer with a crush on Vue.js. I'm a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.

    If you enjoyed this article, show your support by buying me a coffee. You might also enjoy taking one of my online courses!

    Click to load comments...

    Courses
    • Vue Foundations
    • Vue Fullstack
    • Vue Enterprise
    Articles
    • Latest
    • Topics
    Newsletter
    • Join
    • Sponsorship
    More
    • Discord
    • Vue.js jobs
    • About

    Vue.js Developers © 2021. View our privacy policy .

    • RSS
    • |
    • Atom