preface

When adding a route by using vUE’s addRoute, there are two bug s

First, 404 page

1. Reasons for the occurrence

After adding dynamic routing using vUE provided addRoutes, the route Settings on 404 page are not at the end of the route

2. Solutions

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

The code is as follows (example) :

// XXX => the user has an array of dynamic routes
xxx.push({ path: The '*'.redirect: '/ 404'.hidden: true })

// Add route configuration dynamically
router.addRoutes(xxx)
Copy the code

Second, refresh the blank screen

1. Causes

The dynamic route was not loaded completely. Procedure

2. Solutions

After the route is added, the page is displayed

The code is as follows (example) :

if(User's dynamic route is not loaded){// Fix the blank screen bug when refreshingnext({ ... to,// next({ ... To}) to ensure that the route is added before entering the page.
    replace: true // Reprogress once without retaining repeated history})}else {
	next()
}
Copy the code

3. Route duplication

1. Causes

Router.addroutes (XXX) = router. AddRoutes (XXX) = router.

2. Solutions

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
}
Copy the code

This method is to re-instantiate the route, which is equivalent to changing a new route. The route added before does not exist, so you need to call it when you log out.

conclusion

Well informed ~