Vue 异步组件
- defineAsyncComponent 函数
js
import { defineAsyncComponent } from "vue";
const AsyncComp = defineAsyncComponent(
() =>
new Promise((res, rej) => {
res({
template: "<div>hello</div>",
});
})
);
/* *** */
import { defineAsyncComponent } from "vue";
const LoginPopup = defineAsyncComponent(() => import("./LoginPopup.vue"));
/* *** */
const asyncPopup = defineAsyncComponent({
loader: () => import("./LoginPopup.vue"),
// 加载异步组件时要调用的组件
loadingComponent: LoadingComponent,
// 加载失败时的组件
errorComponent: errorComponent,
delay: 1000,
timeout: 1000 * 3,
});- 使用 defineAsyncComponent 函数，可以定义一个异步组件，当组件加载完成时，会自动渲染组件.实现异步加载组件
- 如何与异步的
setup函数结合使用
js
/* Vue3 中使用 */
<template>
<Suspense>
<login-popup />
<template #fallback>
<div>loading...</div>
</template>
</Suspense>
</template>;
const LoginPopup = defineAsyncComponent(() => import("./LoginPopup.vue"));
const getArticleInfo = async () => {
await new Promise((res) => setTimeout(res, 2000));
const article = {
title: "xxx",
};
return article;
};
export default {
async setup() {
const article = await getArticleInfo();
return {
article,
}
},
};vue-router
- 什么是前端路由？
- 在 SPA 应用，描述的是 URL 和 UI 的映射关系，这种映射是单向的，即 URL 变，UI 变(无需刷新页面)
- 前端路由原理
- 如何改变 URL，不引起页面刷新
- 如何检测 URL 变化，同时触发 UI 更新
壹. 如何实现前端路由
-
hash 实现
- hash 是 URL 中 hash(#)及后面的内容，常用于锚点在页面内进行导航，改变 URL 的 hash 部分不会引起页面刷新
- 改变 URL 的方式
- 通过浏览器的前进、后退改变 URL
- 通过 a 标签改变 URL
- 通过 window.location.hash = xxx 改变 URL
-
history 实现
-
history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新
-
history 提供了类似 hashchange 事件的 popState 事件
- popState 事件只会在浏览器前进、后退时触发，并不会在 pushState、replaceState 时触发
- 通过
pushState/replaceState或者<a>标签改变 URL 不会触发 popState 。好在我们可以拦截 pushState、replaceState 的调用及标签的点击事件来检测 URL 变化，在触发这个方法时，执行 hashchange 事件处理函数
* 通过 js 调用 history 的back，go，forward方法或浏览器的前进、后退按钮时，会触发 popState 事件
-
[```html
history 路由
routerView