手把手教你Vue3约定式路由的完美实践：打造动态前端体验

2023-02-23 20:18:25

运用 Vue 3 约定式路由打造动态前端体验

在当今快节奏的网络世界中，用户体验是重中之重。前端开发中，路由管理决定了用户如何与应用程序交互，直接影响整体体验。在 Vue 3 中，约定式路由应运而生，它简化了路由配置和管理，让开发者可以轻松打造动态而优雅的前端体验。本文将深入探讨如何使用 Vite 和 Vue 3 实现约定式路由，并通过一个实操案例，指导你一步步构建一个类似 Umi 的路由系统，实现全局布局和 404 路由。

约定式路由：直观简洁的路由管理

约定式路由是一种路由配置模式，它允许你在组件文件中定义路由，无需在主配置文件中进行繁琐的配置。这使得路由管理更加直观和可维护。在 Vue 3 中，可以使用 <script setup> 语法来实现约定式路由，简化了组件定义和路由关联。

实践指南：打造属于你的约定式路由系统

1. 安装依赖

首先，使用以下命令安装 Vite、Vue 3 及其相关依赖：

npm install vite vue@next vue-router@next

2. 创建项目

创建一个新的 Vite 项目：

vite create my-project

3. 配置 Vite

在项目根目录的 vite.config.js 文件中，添加以下配置：

// vite.config.js
export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.includes('-')
        }
      }
    })
  ]
}

4. 创建组件

在 src 目录下，创建 HelloWorld.vue 组件，并添加以下代码：

// HelloWorld.vue
<template>
  <h1>Hello World!</h1>
</template>

<script setup>
defineComponent({
  name: 'HelloWorld'
})
</script>

5. 配置路由

在 src 目录下，创建一个 router.js 文件，并添加以下代码：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

const routes = [
  {
    path: '/',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

6. 在 App.vue 中使用路由

在 src 目录的 App.vue 文件中，添加以下代码：

// App.vue
<template>
  <router-view />
</template>

<script>
import { createApp } from 'vue'
import router from './router'

const app = createApp({})

app.use(router)

app.mount('#app')
</script>