Vue3 第十二篇：动态组件和异步注册组件

1.异步注册组件

const HomeVue = defineAsyncComponent(() => import('@/views/home/Home.vue'))

这不是真正的动态注册，后面路径无法动态传参，需要研究一下

2.动态组件

切换组件

// 载入组件
const HomeVue = defineAsyncComponent(() => import('@/views/home/Home.vue'))
const UserListVue = defineAsyncComponent(() => import('@/views/user/UserList.vue'))


// 定义参数
let current = reactive({ comName: markRaw(HomeVue) })


// 切换组件
const change = () => {
    current.comName = markRaw(UserListVue)
}

3.简写一下：

let current = reactive({
    com:markRaw(defineAsyncComponent(() => import('@/views/home/Home.vue')))
})

// 切换组件
const change = () => {
    current.com = markRaw(defineAsyncComponent(() => import('@/views/user/UserList.vue')))
}

4.在改进一下，把url提出来，当做参数传入：

// 定义初始组件
let current = reactive({
    com: markRaw(defineAsyncComponent(() => import('@/views/home/Home.vue')))
})

const url = import('@/views/user/UserList.vue')
// 切换组件
const change = () => {
    current.com = markRaw(defineAsyncComponent(() => url))
}

5.把url放到pinia中