vue 开发中路由空白问题

开发用vue实现动态路由，左侧显示动态菜单栏，所有菜单共用一个index.vue文件，出现路由不跳转或者路由跳转后显示空白。

1.路由守卫拦截处理。

let oneRun = true

// 路由拦截

router.beforeEach(async(to, from, next) => {

  NProgress.start()

  await store.dispatch('generateRoutes')

  // 解决动态路由刷新空白问题

  if (oneRun) {

    oneRun = false

    next({ ...to, replace: true })

  }

  next()

})

router.afterEach(() => {

  NProgress.done()

})

2.调用路由文件reset路由

 

const createRouter = () => {

  return new Router({

    scrollBehavior: () => ({ y: 0 }),

    routes: constantRoutes

  })

}

const router = createRouter()

export function resetRouter() {

  const newRouter = createRouter()

  router.matcher = newRouter.matcher

}

3.监控路由变化查询不同数据