32.vue3组件中的变化

1.router的变化

import { createRouter, createWebHistory } from "vue-router";
import routes from "./routes";

// https://next.router.vuejs.org/guide/migration/
export default createRouter({
  history: createWebHistory(), // mode:"history"
  routes,
});

import { getAsyncPage } from "../util";

const Home = getAsyncPage("../views/Home.vue");
const About = getAsyncPage("../views/About.vue");

export default [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

可以看到主要变化在createRouter 和 history 模式的地方。 在main.js 依然要配置router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

2.异步界面和异步组件

异步组件和异步界面可以通过下面的代码去获取

import { defineAsyncComponent, h } from "vue";
import Error from "../components/Error.vue";
import Loading from "../components/Loading.vue";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({
  trickleSpeed: 50,
  showSpinner: false,
});

export function delay(duration) {
  if (!duration) {
    duration = random(1000, 5000);
  }

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}

export function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

// 得到一个异步页面
export function getAsyncPage(path) {
  return defineAsyncComponent({
    loader: async () => {
      NProgress.start();
      await delay();
      const comp = await import(path);
      NProgress.done();
      return comp;
    },
    loadingComponent: Loading, // 当promise在pending状态时，将显示这里的组件
  });
}

// 得到一个异步组件
export function getAsyncComponent(path) {
  return defineAsyncComponent({
    loader: async () => {
      await delay();
      if (Math.random() < 0.5) {
        throw new TypeError();
      }
      return import(path);
    },
    loadingComponent: Loading, // 当promise在pending状态时，将显示这里的组件
    errorComponent: {
      render() {
        return h(Error, "出错了！！！");
      },
    },
  });
}

3.Teleport

vue3 中新加的Teleport可以实现把一个组件的逻辑处理放在当前位置，而把组件的真实层级关系放在其他地方，这里举一个典型的例子就是全局的弹出层，我们业务逻辑是放在当前位置，而dom的真实层级关系我想放在body 上面。下面是具体的代码. to="",这里可以是写一个css选择器。

 <Teleport to="body">
        <Modal v-if="modalVisible">
          <button @click="modalVisible = false">关闭朦层</button>
        </Modal>
      </Teleport>