动态路由的使用

登录页面login.vue

<template>
  <div>
    <button @click="initRouter">登录</button>
  </div>
</template>

<script setup lang="ts">
import { login } from "@/api/login";
import { useRouter } from "vue-router";
const router = useRouter();
const initRouter = async () => {
  const result = await login();
  console.log(result, "result");
  result.route.forEach((v: any) => {
    router.addRoute({
      path: v.path,
      name: v.name,
      component: () => import(`../views/${v.component}`),
    });
  });
  router.push("/about");
};
</script>

<style></style>

api:login

import axios from "axios";
import express, {
  Express,
  Router,
  Request,
  Response,
  NextFunction,
} from "express";

const app: Express = express();

app.all("*", (req: Request, res: Response, next: NextFunction) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

const router: Router = express.Router();

app.use("/api", router);

router.get("/login", async (req: Request, res: Response) => {
  res.json({
    route: [
      {
        path: "/about",
        name: "about",
        component: "about.vue",
      },
      {
        path: "/news",
        name: "News",
        component: "news.vue",
      },
    ],
  });
});

router.get("/list", async (req: Request, res: Response) => {
  const result = await axios.get(
    "https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=341219827928"
  );
  res.json({
    data: result.data.data,
  });
});

app.listen(3333, () => {
  console.log("success server http:localhost:3333");
});