08 %E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE

目标

创建路由文件夹并完成最基本的路由配置

文件夹创建

在项目根目录中的src目录下创建routes用于存放我们的路由文件 然后再routes的文件夹下先创建一个index.ts的路由配置文件。

初始化路由

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  routes: [],
  history: createWebHistory(import.meta.env.VITE_APP_BASE ?? '/'),
})

export default router

main.ts中导入路由插件

import router from '~/routes'

const app = createApp(App)

app.use(router)

调整App.vue

导入路由地址后我们调整一下App.vue，作为我们路由的入口。如下：

<script setup lang="ts">
</script>

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

创建页面存放路径

下面我们先创建页面存放路径，我们在src目录下创建pages用于存放我们的页面信息。 然后我们分别创建index.vue和worksapce/index.vue两个测试文件。

配置路由

接下来我们先配置默认的路由。我们在routes目录下创建一个static-routes.ts的文件用于存放静态路由信息。

import type { RouteRecordRaw } from 'vue-router'

const staticRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('~/pages/index.vue'),
    name: 'index',
  },
  {
    path: '/workspace',
    component: () => import('~/pages/workspace/index.vue'),
    name: 'workspace',
  },
]

export default staticRoutes

meta的类型配置

在项目中我们会有很多的扩展类型字段，一般情况下我们都会存放在路由中的meta中，作为扩展字段存在，但是默认情况下是没有类型提示的，那么我们需要扩展一下类型提示信息。 我们在types/env.d.ts中扩展如下：

import 'vue-router'


declare module 'vue-router'{
  interface RouteMeta {
    title?: string // 先仅扩展一个title后续再补充
  }
}

我们再静态路由中测试配置是否生效。