Solutions to problems using addRoutes in Vue projects

Preface

AddRoutes official introduction:

Function signature:

router.addRoutes(routes: Array<RouteConfig>)

Add more routing rules dynamically. The argument must be an array conforming to the routes option.

When I was working on the vue backend permission management system these two days, I found that after adding routes using addRoute provided by vue, two bugs would appear. Let's see how to solve them~

1. 404 Page

1. Causes

After adding dynamic routing using addRoutes provided by vue, the routing setting for the 404 page is no longer at the end of the routing

2. Solution

Add the route for the 404 page to the end of the dynamic route

The code is as follows (example):

// xxx => dynamic route array that the user has xxx.push({ path: '*', redirect: '/404', hidden: true })

// Dynamically add routing configuration router.addRoutes(xxx)

2. Refresh the white screen

1. Cause

Dynamic routing is not fully loaded when refreshing

2. Solution

After the route is added, enter the page

The code is as follows (example):

if (user's dynamic routing is not loaded) {
	//Solve the white screen bug that occurs when refreshing
  next({
    ...to, // The purpose of next({ ...to }) is to ensure that the route is added before entering the page (which can be understood as re-entering)
    replace: true // Reenter once, do not keep duplicate history})
} else {
	next()
}

3. Routing Duplicates

1. Cause

The route settings are added through router.addRoutes(xxx). When you log out, they are not cleared. When you log in again, they are added again, so there are duplicates.

2. Solution

The code is as follows (example):

// Reset the route export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // Reset the matching path of the route}

This method re-instantiates the route, which is equivalent to changing a new route. The previously added route no longer exists. You only need to call it when logging out.

Summarize

This is the end of this article about solving problems when using addRoutes in Vue projects. For more information about Vue using addRoutes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!