首页 > 其他分享 >Vue动态菜单addRoutes的使用和踩坑事项

Vue动态菜单addRoutes的使用和踩坑事项

时间:2023-01-31 21:23:07浏览次数:32  
标签:Vue beforeEach addRoutes component next children 菜单 else route

image

坑一 添加route后马上跳转可能出现白屏情况
原因分析:还未成功添加就next()跳转,找不到组件
解决办法:
使用next()传参,在路由守卫beforeEach中持续循环,知道确认已经添加成功,代码如下

router.beforeEach((to, from, next) => {
      if (store.getters.roles.length === 0) {
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true })
          })
      } else {
        next()
      }
})

next()传参的作用是继续还会beforeEach而不是直接进入某个路由

beforeEach((to, from, next) => {
  next('/logon')
}
这行代码并不是直接进入 /logon
而是会一直循环在这里,知道遇到`next()`

正确代码

beforeEach((to, from, next) => {
   if(to.path === '/home') {
   	next('/logon')
   } else {
    // 如果要去的地方不是 /home , 就放行
   	next()
   }
}

坑二 找不到component
而是组件component的引入,在服务器传递回来的组件是地址是字符串需要获取对应的组件

// 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false) {
  return asyncRouterMap.filter(route => {
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else if (route.component === 'ParentView') {
        route.component = ParentView
      } else if (route.component === 'InnerLink') {
        route.component = InnerLink
      } else {
        route.component = loadView(route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route, type)
    } else {
      delete route['children']
      delete route['redirect']
    }
    return true
  })
}

const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

标签:Vue,beforeEach,addRoutes,component,next,children,菜单,else,route
From: https://www.cnblogs.com/EQ1024/p/17080797.html

相关文章

  • Vue的学习与实践
    之前我们用MVC的思想实现功能,但是MVC只能实现模型到视图的单向展示,Vue基于MVVM(model-view-viewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。快速入门新建HTML......
  • vue super flow 多种形状
    1<template>2<v-containerclass="workflow-container"grid-list-xlfluid>3<divclass="super-flow-demo">4<divclass="node-container">......
  • vue+springboot集成钉钉扫码登录
    具体接入方式可参考官方介绍:https://open.dingtalk.com/document/orgapp-server/tutorial-obtaining-user-personal-information本文只演示vue+springboot如何实现钉钉扫......
  • 若依ruoyi-vue + 小程序uniapp + Android 环境安装
    ruoyi-vue安装跟随公众号王清江唷01系统环境JavaEE8Servlet3.0ApacheMaven302主框架SpringBoot2.2.xSpringFramework5.2.xSpringSecurity5.2.x03持久......
  • vue创建项目
    空格键是选中与取消,A键是全选TypeScript支持使用TypeScript书写源码ProgressiveWebApp(PWA)SupportPWA支持。Router支持vue-router。Vuex支持vuex。C......
  • vue 使用天地图地理编码API 报跨域错误: from origin 'http://localhost' has been blo
     解决办法加了一个header头之后可以正常访问  "Access-Control-Allow-Origin":"*",;axios.get(`${this.addressBDApi}geocoder?ds={"k......
  • SpringBoot项目前端使用vue下载后端resources下的文件(导出模板)
     放到resources/xls/import-template.xls这个路径可以自己修改代码同步修改即可 @GetMapping(value="/downloadXls")@ApiOperation(value="下载导入模板"......
  • 接口测试|Fiddler界面主菜单功能介绍(一)
    Fiddler界面主菜单功能介绍File菜单File菜单中的命令主要支持完成通过Fiddler来启动和停止web流量的捕获(capture),也可以加载或存储捕获的流量(1)CaptureTraffic:默认勾选,勾选......
  • 在vue3使用$forceUpdate的方法
    如果真的很需要在vue3中使用forceUpdate,同时又想使用 <scriptlang="ts"setup>的写法,那么可以这样写:<template> <button@click="handleClick">按钮</button></tem......
  • vue3原理
    constp=newProxy({name:'路飞',age:18},{//创建代理//查get(target,propName){console.log(`有人读取......