Vue3+Ts+Vite项目(第三篇)——配置路由

一、安装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>