关于vue2升级vue3遇到的问题总结第一篇

原始项目是VUE2 + element-ui 开发，升级为VUE3 + element-plus，如果全部使用VUE3的语法，基本上项目里90%以上的代码都需要改动，工程量巨大，所以vue2的项目不建议升级vue3，新项目可以用vue3来开发，目前项目还没有全部升级，遇到哪些问题就记录一下

1.element-plus 表单的提交功能

<template>
	<div class="login-container">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
			<el-button :loading="loading" type="primary" :disabled="!disabled"
					@click="submitForm(ruleFormRef)">提交
			</el-button>
		</el-form>
	</div>
</template>
<script lang='ts' setup>
    import {
		ref,
		reactive,
		nextTick,
		toRefs
	} from 'vue'
    import type {
		ElForm
	} from 'element-plus'
    const ruleFormRef = ref < InstanceType < typeof ElForm >> ()  //ruleFormRef是表单的ref值

    const state = reactive({
        ruleForm:{
            value:''
        }
    })
    const { ruleForm } = toRefs(state)
    const submitForm = (formEl: InstanceType < typeof ElForm > | undefined) => {
		if (!formEl) return
		formEl.validate((valid) => {
			if (valid) {
				//表单验证通过的操作
			} else {
				console.log('error submit!')
				return false
			}
		})
	}

</script>

2.element-plus 新增功能 清空表单校验

<script lang='ts' setup>
    import {
		ref,
		reactive,
		nextTick,
		toRefs
	} from 'vue'
    import type {
		ElForm
	} from 'element-plus'
    const ruleFormRef = ref < InstanceType < typeof ElForm >> ()  //ruleFormRef是表单的ref值

    const state = reactive({
        ruleForm:{
            value:''
        }
    })
    const { ruleForm } = toRefs(state)
    function add() { //新增功能
        state.ruleForm = { value:'' }
        nextTick(() => { ruleFormRef.value.resetFields() }
    }




</script>

3.动态路由的修改

vue-router4.x 中去掉了addRoutes 只能使用 addRoute 并且不能直接动态添加数组，需要循环赋值，由于把webpack换成了vite，所有在处理后端返回的路由数据时 component 组件的特殊处理方式也改变了，此代码写在了store / modules / permission.js中

import { defineAsyncComponent } from 'vue'
export const filterAsyncRouter = (routers, lastRouter = false, type = false) => { // 遍历后台传来的路由字符串，转换为组件对象
  return routers.filter(router => {
    if (type && router.children) {
      router.children = filterChildren(router.children)
    }
    if(router.hidden == "true"){
      router.hidden = true
    }
    if(router.hidden == "false"){
      router.hidden = false
    }
    if (router.component) {
      if (router.component === 'Layout') { // Layout组件特殊处理
        router.component = Layout
      } else if (router.component === 'ParentView') {
        router.component = ParentView
      } else if (router.component != 'Layout' && router.children.length > 0) {
        const component = router.component + '/index'
        router.component = loadView(component)
      }else {
        const component1 = router.component
        router.component = loadView(component1)
      }
    }
    if (router.children != null && router.children && router.children.length) {
      router.children = filterAsyncRouter(router.children, router, type)
    } else {
      delete router['children']
      delete router['redirect']
    }
    return true
  })
}
function filterChildren(childrenMap, lastRouter = false) {
  var children = []
  childrenMap.forEach((el, index) => {
    if (el.children && el.children.length) {
      if (el.component === 'ParentView') {
        el.children.forEach(c => {
          c.path = el.path + '/' + c.path
          if (c.children && c.children.length) {
            children = children.concat(filterChildren(c.children, c))
            return
          }
          children.push(c)
        })
        return
      }
    }
    if (lastRouter) {
      el.path = lastRouter.path + '/' + el.path
    }
    children = children.concat(el)
  })
  return children
}
export const loadView = (view) => {
  return () => defineAsyncComponent(() => import(/* @vite-ignore */`../../views${view}.vue`))
}

此代码是在router.beforeEach中

store.dispatch('user/getInfo').then((res) => {
	const sidebarRoutes = filterAsyncRouter(res.data)
	store.dispatch('GenerateRoutes', sidebarRoutes).then(() => { 
    //主要是这部分
	sidebarRoutes.forEach(v=>{router.addRoute(v)})
    //----------
	next({ ...to, replace: true })
    }).catch(res =>{
	console.log(res)
    })
    store.dispatch('SetSidebarRouters', sidebarRoutes)
}).catch((res) => {
				     
})

这些问题是我自己遇到的，可能不是完全适用所有人，希望可以帮到大家，后续还会更新