Vue3——Vue Router

• 安装 vue-router 依赖包

npm install vue-router@4

• 创建 router 文件夹，然后在里面创建一个 index.ts 文件，用于定义你的路由配置

// index.ts
import { createRouter, createWebHashHistory } from "vue-router";
import { routes } from "./routes";

// 创建一个路由实例
const router = createRouter({
  // 使用hash模式，你也可以使用history模式或者memory模式
  history: createWebHashHistory(),
  // 使用你的路由规则
  routes,
});

// 导出路由实例
export default router;

// routes.ts
import { RouteRecordRaw } from "vue-router";

//对外暴露配置路由(常量路由):全部用户都可以访问到的路由
export const routes: Array<RouteRecordRaw> = [
  {
    // 布局
    path: "/",
    name: "Layout",
    component: () => import("@/views/layout/index.vue"),
  },
  {
    // 登录
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
  },
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: () => import("@/views/404/index.vue"),
  },
];

• main.ts引入

// 引入路由
import router from "@/router";

// 获取应用实例对象
const app = createApp(App);

// 注册模板路由
app.use(router);

app.mount("#app");