router 动态路由与懒加载

路由的使用

静态路由

静态路由: 引入组件然后挂载到router的component下,这样在页面刷新时,就会直接请求引入, 当项目越来越大时,
初始化的时间就会越来越长,因为它要将所有的页面全部引入后才会去渲染页面. 不管你当前页面有没有用到, 初始化是加载的是项目中所有组件,以及ts文件

      import User from './User.vue'
	  const routes = [
	   { path: '/users', component: User },
	 ]

静态路由 + 懒加载

由于项目变得很大,在浏览器加载时,就会将所有的组件引入进来,导致页面初始化渲染变得越来越慢,
官网提供了懒加载的形式引入组件()=> import('') 这样,在页面刷新时,不会直接引入,当某个菜单触发式, 它才会引入对应的组件.以及组件内部用到的相关的文件

    const routes = [
	   { path: '/users', component: ()=> import('@/views/User.vue')},
	 ]

动态路由 + 懒加载

菜单的实现分为两种,一种是直接在前端代码写死(静态菜单),另一种是配置在数据库中(动态菜单).
因为组件名称我们不能提前知道,只有在请求到菜单数据时,程序才能得知具体挂载哪个组件.
当然如果直接用懒加载的方法component: ()=> import(/src/${item}.vue) 在访问菜单时,router会报找不到对应的组件.
解决方法
推荐一种import.meta.glob 的形式, 当使用modules[/src/${item.componentPath }.vue] 获取某个组件实例时.
它返回的结果便是()=>import('xxxx/xxx.vue') 正是router 懒加载所需要的格式. 将它直接赋值给router的component属性即可

完整代码

	const menuList = [...], // 后端提供的路由信息
	// 引用所有的vue组件
	const modules = import.meta.glob('@/views/**/**.vue');
	const addServerMenuRouter = (router,menuList, modules)=>{
	
		for(const item of menuList) {
		if(item.componentPath === 'RouteView') {
		   // 此处是菜单父节点,无需任何操作
		} else {
			// 此处是叶子节点, 添加router
			router.addRoute('index', { 
				path: item.path,
				name: item.name,
				meta: item.meta,
				component: modules[`/src/${item.componentPath }.vue`]
			})
		}
	 }
	 if(item.children && item.children.length >0) {
	   addServerMenuRouter(router, modules, item.children)
	 }
	 
	}