一、安裝vue-router
yarn add vue-router
二、創(chuàng)建頁(yè)面
項(xiàng)目目錄下新建views文件夾，添加文件（home、login、test）

image.png

三、創(chuàng)建router文件夾
3.1、在src下新建router文件夾，在router文件下創(chuàng)建index.ts和modules文件夾

image.png

3.2、在 modules 文件夾下創(chuàng)建模塊化的 ts 文件，并填入對(duì)應(yīng)的代碼

image.png

在 /modules/test.ts文件中，寫入如下代碼：

export default [
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/test/index.vue'),
    meta: {
      title: '測(cè)試頁(yè)面',
    },
  },
];

3.3、完善 /src/router/inde.ts 文件

// history模式
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 引用test.ts
import testRoute from './modules/test.ts';

export const publicRoutes: Array<RouteRecordRaw> = [
  // 路由的路徑
  ...testRoute,

  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
  },
];

// 創(chuàng)建路由對(duì)象
const router = createRouter({
  history: createWebHistory(),
  routes: publicRoutes,
});

/* 初始化路由表 */
export function resetRouter() {
  router.getRoutes().forEach((route) => {
    const name = route.name;
    if (name && router.hasRoute(name)) {
      router.removeRoute(name);
    }
  });
}

export default router;

四、在main.ts中使用路由

import { createApp } from 'vue';
import App from './App.vue';
import './style.css';

import router from './router';

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

五、修改App.vue

<script setup lang="ts">

</script>

<template>
  <router-view></router-view>
</template>