vue3的router与组件异步加载

router的小改动

import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
const routes = createRouter({
	// history: createWebHistory(base) // 相当于 vue2的 mode:"history",base: base
	history: createWebHashHistory() // mode: "hash"
	// 其他改动参见官方文档
})

异步加载组件

import { defineAsyncComponent, h } from "vue" // 渲染函数h已被提到全局api
import Loading from "xxx/Loading.vue" // 一个加载中的组件
import HasError from "xxx/HasError.vue" // 一个组件加载出错时显示的组件
// 完整写法
const SomeComponent = defineAsyncComponent({
	// loader: ()=> import("xxx/SomeComponent.vue") 开发常用写法
	loader: async ()=> { // 可以返回一个promise
		const data = await xxxx() // 这里随便干嘛都行
		if (!data) {
			throw new Error()	// 这块主要是为了模拟出错
		}
		return import("xxx/SomeComponent.vue") // 正常返回
	},
	loadingComponent: Loading, // SomeComponent未加载完成时 显示loading组件
	// errorComponent: HasError // SomeComponent加载出错时显示 error组件 （没参数）
	errorComponent: {
		render() {
			return h(HasError, "会传入slot") // h函数已被提到全局，不再作为参数传递
		}
	}
})

// 常用写法
const SomeComponent = defineAsyncComponent(()=> import("xxx/SomeComponent.vue"))


export default {
	components: { // 注册组件
		SomeComponent，
		Loading，
		HasError
	}
}