手摸手创建一个 Vue + Ts 项目（二） —— 配置路由

手摸手创建一个 Vue + Ts 项目目录

• 手摸手创建一个 Vue + Ts 项目（一） —— 初始化项目 - 掘金 (juejin.cn)
• 手摸手创建一个 Vue + Ts 项目（二） —— 配置路由 - 掘金 (juejin.cn)

前言

在上一篇中，我们初始化了整个项目，并且添加了最基本的依赖，已经实现了效果如下：

而在常见的后台项目中，常见于左侧有一菜单栏，右侧是标题栏和内容的布局。接下来，我们主要来实现该基本布局。这一篇中，我们先学会如何从零开始配置路由。

vue-router 官网：router.vuejs.org/zh/

安装

pnpm install vue-router@4

创建两个测试页面

在 src 目录下，新建 views 目录，用于存放页面文件。

分别创建两个测试页面，dashboard 和 table：

• dashboard/index.vue：

  <script setup lang="ts">
  
  </script>
  
  <template>
  	<div>
  		<h3>Dashboard</h3>
  		<router-link to="/table">Go to Table</router-link>
  	</div>
  </template>
  
  <style scoped>
  
  </style>
  

• table/index.vue：

  <script setup lang="ts">
  
  </script>
  
  <template>
  	<div>
  		<h3>Table</h3>
  		<router-link to="/dashboard">Go to Dashboard</router-link>
  	</div>
  </template>
  
  <style scoped>
  
  </style>
  

配置页面路由

有了页面文件之后，第一件事情就是需要配置当前页面的路由。

在 src 目录下，新建 router 文件夹，用于存放路由配置文件。首先在其下创建一个 modules 文件夹，区分各模块不同的路由配置文件。

创建两个路由配置文件：dashboard.ts 和 table.ts：

• router/modules/dashboard.ts：

  import type { RouteRecordRaw } from 'vue-router'
  
  const dashboardRoutes: RouteRecordRaw[] = [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index.vue')
    }
  ]
  
  export default dashboardRoutes
  

• router/modules/table.ts：

  import type { RouteRecordRaw } from 'vue-router'
  
  const tableRoutes: RouteRecordRaw[] = [
    {
      path: '/table',
      name: 'Table',
      component: () => import('@/views/table/index.vue')
    }
  ]
  
  export default tableRoutes
  

动态获取所有路由配置

配置好前面的路由信息后，需要将这些路由配置加载到 vue-router 中，这里采用动态读取文件的加载方式，即在 modules 目录下创建好路由配置后，可以自动加载到 vue-router 中，不需要再次导入。

在 router 目录下创建一个 routes.ts 文件，用于读取 modules 目录下的路由配置信息：

• routes.ts

  import type { RouteRecordRaw } from 'vue-router'
  
  const modules = import.meta.glob('./modules/**/*.ts', { eager: true })
  
  const routes = Object.keys(modules).reduce((routes, key) => {
      // @ts-ignore
      const module = modules[key].default
      if (Array.isArray(module)) {
          return [...routes, ...module]
      } else {
          return [...routes, ...module.routes]
      }
  }, [] as RouteRecordRaw[])
  
  export default routes
  

启用 vue-router

经过前面的准备工作后，就可以将所有路由应用到 vue 中了。在 router 目录下创建 index.ts：

• index.ts

  import {createWebHistory, createRouter} from "vue-router";
  import type {App} from 'vue'
  // 获取所有路由
  import routes from './routes'
  
  const router = createRouter({
    routes,
    // 这里使用历史记录模式
    history: createWebHistory()
  })
  
  export const useRouter = (app: App<Element>): void => {
      app.use(router)
  }
  

随后在 main.ts 中启用：

• main.ts

  // router
  import { useRouter } from '@/router'
  
  useRouter(app)
  

最后，在 App.vue 中，渲染路由匹配到的组件：

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

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

<style scoped>
</style>

测试

启动项目之后，打开发现页面空白，这是因为我们没有配置根路径，之后会加上的，一步步来。

可以先在浏览器的地址栏后面增加 /dashboard，就可以访问到 dashboard 下的页面啦：

点击 「Go To Table」：，可以正常访问到 table 页面：

OK，到目前为止，vue-router 已经成功整合完成，接下来完善下。

配置根路径

在前面讲到，打开页面时，需要手动输入要访问的链接，这对于用户来说是非常不友好的，那如何配置打开页面时，自动跳转到 /dashbaord 呢？

接下来，我们就来解决这个问题。

在 router/modules 目录下，创建 index.ts 文件：

• router/modules/index.ts：

  import type { RouteRecordRaw } from "vue-router"
  
  const rootRoutes: RouteRecordRaw[] = [
    {
      path: '/',
      name: 'Home',
      redirect: '/dashboard'
    }
  ]
  
  export default rootRoutes
  

在这个文件中，配置了 / 根路径，通过 redirect 指定根路径直接跳转到 /dashboard，则重新打开浏览器后，会发现地址栏，又 / 自动变为 /dashboard。

配置 404

当输入一个错误的 URL 地址时，这里的错误是指，没有配置相关的路由信息，会出现页面空白的现象，例如最开始访问 / 时，其实就是没有匹配到相关的路由。这里可以配置一个 404 页面，当出现这种情况时，跳转到该页面。

创建一个 404 页面

在 views 目录下，创建一个 error 文件夹，用于存放 404 页面：

• views/error/404.vue：

  <script setup lang="ts">
    import { ref } from 'vue'
    import { useIntervalFn } from '@vueuse/core'
    import { useRouter } from 'vue-router'
  
    const router = useRouter()
  
    const timeRef = ref<number>(10)
  
    const { pause } = useIntervalFn(() => {
      if (timeRef.value > 1) {
        timeRef.value--
      } else {
        pause()
        router.push('/')
      }
    }, 1000)
  </script>
  
  <template>
    <div class="flex h-full flex-col items-center mt-20">
      <n-result status="404" title="404 资源不存在" size="huge">
        <template #footer>
          <n-button @click="$router.push('/')">返回首页</n-button>
        </template>
        <div class="text-center">{{ timeRef }} 秒后返回首页</div>
      </n-result>
    </div>
  </template>
  

这里需要注意，这里用到了一个之前没有提到的模块：@vueuse/core。这是一个 Vue 组合式 Api 必不可少的功能函数库。里面封装了许多常用功能，开箱即用。

官网地址：www.vueusejs.com/

安装：pnpm i @vueuse/core

配置404路由

OK，回到正题。

新建好 404 页面后，相应需要创建一个路由，在 router/modules 目录下创建一个 error.ts 文件：

import type { RouteRecordRaw } from "vue-router"

const errorRoutes: RouteRecordRaw[] = [
  {
    path: '/404',
    name: 'NotFound',
    meta: {
      title: 'Page Not Found'
    },
    component: () => import('@/views/error/404.vue')
  },
  // 所有未定义路由，全部重定向到 404
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  }
]

export default errorRoutes

测试

在浏览器中输入一个未配置 URL，效果如下：

10 秒后，会自动跳转到主页。

结语

本篇从安装 vue-router 到启用，涵盖了一些常见的操作，在后面的布局和菜单，也是需要依赖布局配置的。

我是「代码笔耕」，致力于打造高效简介、稳定可靠代码的后端开发。 由于不是专业的前端开发，也是通过写这一系列的文章，来提升巩固下自己的水平。
本文可能存在纰漏或错误，如有问题欢迎指正，感谢您阅读这篇文章，如果觉得还行的话，不要忘记点赞、评论、收藏喔！
最后欢迎大家关注我的开源项目：easii (easii) - Gitee.com