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

代码笔耕
1,112 阅读5分钟

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

前言

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

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

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

avatar
文章
阅读
粉丝