vue3的动态路由

最新推荐文章于 2024-05-23 17:34:08 发布

哪有人敲代码不戴头盔的

最新推荐文章于 2024-05-23 17:34:08 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44090753/article/details/127409044

版权

这两天项目慢慢成型，要求把路由改为动态路由，期间遇到了几个问题，在此记录一下
因为项目是其中值得注意的几个问题有

配置动态路由的步骤
配置过程中route的component的引入
配置完成后，页面刷新白屏

1. 配置动态路由的步骤

步骤都是在路由守卫中完成的，首先判断用户是否登录，登录成功后再判断vuex中用来存放route的list是否有值，没有值的话调vuex中的接口请求路由数据，
然后拿到路由数据后，配置成route格式，用route的addRoute来加动态路由
(vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter)
以下是路由守卫的代码

import storage from 'store'
import store from '@/store'
import { whiteList, manageRouterMap } from './basics.router'
import { Router, RouteRecordRaw } from 'vue-router'
import { generateIndexRouter } from '@/utils/util'
const loginPath = '/login'
const defultPath = '/'

router.beforeEach((to, from, next) => {
    const param = getUrlParms("token"); //调用函数即可
    if (param) {
      storage.set('token', param)
    }
    //从这里开始，以上算是业务代码
    if (storage.get('token')) {
      if (to.path === loginPath) {
        next({ path: defultPath })
      } else {
      //判断vuex中的routers是否有值
        if ( store.state.user.routers.length == 0) {
          // ***********************动态路由注释***********************
          //调接口拿到路由数据
          store.dispatch('user/menu').then(e => {
            let menuData = e.result.menu
            if (menuData === null || menuData === '' || menuData === undefined) {
              return
            }
            //这块是处理拿到的接口数据,在另一个ts里
            let constRoutes=generateIndexRouter(menuData)
            //处理完成后,调vuex中更新routers的方法更新一下routers
            store.dispatch('user/UpdateAppRouter', { constRoutes }).then((e) => {
            //更新后加入route
              router.addRoute(e[0])
            })
             next({...to,replace:true})
          })
        } else {
          next()
        }
      }
    } else {
      if (whiteList.includes(to.path)) {
        next()
      } else {
        // window.location.href = window._CONFIG['loginURL']
        next({ path: loginPath, query: { redirect: to.fullPath } })
      }
    }
  }

2.配置路由数据中遇到的关于component引入的问题

vue3+ts+vite的项目,关于路由component的引入,找了很多方法,最后发现就下面代码中的有效

import layout from '/src/layout/index.vue'
const modules = import.meta.glob('/src/views/**/*.vue')

// 生成首页路由
export function generateIndexRouter(data) {
    let indexRouter: any = [{
        path: '/',
        name: 'planManage',
        component: layout,
        meta: {
            title: '首页'
        },
        redirect: '/planManage',
        children: [
            ...generateChildRouters(data)
        ]
    },
    // {
    //     'path': '/:pathMatch(.*)*',
    //     'redirect': '/404',
    //     'hidden': true
    // }
]
    return indexRouter
}
function generateChildRouters(data) {
    console.log('data',data);
    
    let routers = []
    for (let item of data) {
      let menu = {
        path: item.path,
        name: item.name,
        meta:item.meta,
        component: modules[`/src/views${item.path}/index.vue`],
        // component: () => import(`/src/views/planManage/index.vue`),
        children: [],
  
      }
      if (item.children && item.children.length > 0) {
        menu.children = [...generateChildRouters(item.children)]
    }
      routers.push(menu)
    }
    return routers
  }