Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Problem Description

Yesterday, when I was working on the function of dynamically adding permission pages to routes in the Vue backend management system, I encountered a problem: the dynamically added routing page had a 404 error when the page was refreshed.

Scenario

The permission control of the backend management system is achieved by defining the permission code on the frontend page, saving the code to the backend colleagues and configuring it in a table. Then, the permission code list returned by the backend is filtered and matched with the code menu list configured on the frontend page. Pages with equal codes are permissioned pages, and then dynamically added to the route through router.addRoute(). Only routes with permission can be accessed, otherwise it will prompt that there is no permission.

Fixed routes are placed in the new Router at the beginning, such as the login page login

Interface return

Front-end menu definition

Methods in vuex

Problems

After logging in, call the method in vuex to complete the acquisition of permission code, dynamically filter the permission routing page operation, and then add the permission menu to the route through router.addRoute(), enter the dynamically added routing page, and refresh the page to display 404

Cause Analysis

When the page is refreshed, the routes are reinitialized. The dynamically added routes no longer exist. Only some fixed routes (such as the login page) are still there, so a 404 error occurs.

Solution

The data stored in the VUEX store will be cleared when the page is refreshed.
Make a judgment at the global navigation router.beforeEach of the route, and judge whether the page is refreshed according to whether the list stored in VUEX has a value. If it is not 0, it is the first login. After login, the matching route will be used, and there will be no problem; if list.length is 0, it is a refresh page, and you need to re-execute the route matching and re-add the dynamic route.

Implement code route/index.js to add logic judgment to the navigation guard

———router.js————-

const constantRoutes = [
 {
  path: '/',
  redirect: '/login'
 },
 {
  path: '/login',
  name: 'login',
  meta: {
   auth: false
  },
  component: () => import('@/views/login')
 },
 {
  path: '/layout',
  name: 'layout',
  meta: {
   auth: true
  },
  component: () => import('@/views/layout/index'),
  children: [
   {
    path: '/index',
    name: 'index',
    component: () => import('@/views/home')
   }
  ]
 },
 {
  path: '*',
  component: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 new VueRouter({
  routes: constantRoutes
 })
export function resetRouter() {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // reset router
}
const router = createRouter()
 
//Reset the permission page dynamic routing after the page is refreshed to prevent dynamic routing 404 problems const reSetPermissionList = to => {
 return new Promise((resolve, reject) => {
  if (to.path !== '/login' && store.state.permission.permissionList.length === 0) {
   store
    .dispatch('permission/getPermissionList')
    .then(() => {
     resolve('permCode')
    })
    .catch(error => {
     resolve('permCode')
    })
  } else {
   resolve()
  }
 })
}
router.beforeEach((to, from, next) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)) {//Are you logged in? Go to the login page next({
   path: '/login',
   query: {
    redirect: to.fullPath
   }
  })
 } else { //Logged in user enters the page if (to.path === '/login') {
   next({ path: '/index' })
  } else {
    reSetPermissionList(to).then(data => {
     data === 'permCode' ? next({ path: to.path, query: to.query }) : next()
    })
  }
 }
 
})

Summarize

It mainly determines whether the data in VUEX exists in the global navigation and whether the page is refreshed. If so, it goes through the permission routing matching method again.

The above is the detailed content of the reasons and solutions for the failure of the dynamically added routing page of Vue to refresh. For more information about Vue routing page refresh, please pay attention to other related articles on 123WORDPRESS.COM!