一、安装vue-router
yarn add vue-router
二、创建页面
项目目录下新建views文件夹，添加文件（home、login、test）
image.png
三、创建router文件夹
3.1、在src下新建router文件夹，在router文件下创建index.ts和modules文件夹
image.png
3.2、在 modules 文件夹下创建模块化的 ts 文件，并填入对应的代码
image.png
在 /modules/test.ts文件中，写入如下代码：
export default [
{
path: '/test',
name: 'test',
component: () => import('@/views/test/index.vue'),
meta: {
title: '测试页面',
},
},
];
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'),
},
];
// 创建路由对象
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>
