Vue Router 4's relative changes

Author: Matt Maribojoc
Translator: Frontend Xiaozhi
Source: stackabuse

If you have dreams and dry goods, search on [Great Move to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

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

Vue3 support

Vue 3 introduces the createApp API, which changes the way that plugins are added to Vue instances. Therefore, the previous version of Vue Router will not be compatible with Vue3.

Vue Router 4 introduces the createRouter API, which creates a router instance 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 the early version of Vue Router, we can specify the routing mode with the mode

hash mode uses URL hashing to simulate the complete URL so that the page will not be reloaded when the URL changes. history mode uses HTML5 History API to realize URL navigation without reloading the page.

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

In Vue Router 4, these patterns have been abstracted into modules, which can be imported and assigned to the new history option. 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 the addRoute method to realize dynamic routing.

This method is rarely used, but it does have some interesting use cases. For example, suppose we want to create a UI for a file system application, and we want to add paths dynamically. We can proceed as follows:

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

The navigation guard is a hook of Vue Router, allowing users to run custom logic before or after the jump, such as beforeEach , beforeRouterEnter etc.

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

In version 4, we can return values or Promises from hook methods. In this way, the following operations can be carried out conveniently and quickly:

// 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 official website to learn more.

~End, I’m the front-end Xiaozhi, I’m going to guarantee the construction, we will see you in the next issue~

---

code that may exist after the code is deployed cannot be known in real time. In order to solve these BUGs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://vuejsdevelopers.com/topics/vue-router/

comminicate

If you have dreams and dry goods, search on [Daily Move to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.