Vue uto 通过文件结构进行路由
使用 VueJS 时我遇到的一个问题是创建路由时,特别是当项目变得越来越大并且试图维护你的 Route.ts 或 Route.js 时就会出现问题。我还记得一个项目,它有太多的页面,当你创建一个新页面时,你必须更新你的路由,当你删除一个页面时,你必须更新你的路由文件,以避免出现错误。
所以我开始寻找如何使用基于文件的自动路由。尝试在 google 中搜索很难找到,因为我在互联网上找到的大部分结果都是针对 webpack 和版本 2 的。所以我必须在 Vue Github 存储库讨论中询问它,我得到了答案。
Unplugin Vue Router 简介,这是 Vue 3 的类型化、基于文件的路由。而且实际上很容易设置它。正如他们在 Github 自述文件中所述,这是实验性的。
首先让我们从头开始创建我们的 Vue 项目。众所周知,我们可以通过运行这个命令来生成一个项目,然后回答一些选项。如果您不熟悉如何操作,可以查看 VueJs 页面中的快速入门。
pnpm create vue@latest
因此,在这个示例中,这就是我创建项目的方式。
pnpm create vue@latest Vue.js - The Progressive JavaScript Framework √ Project name: ... vue-auto-route √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No √ Add ESLint for code quality? ... No / Yes √ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes Scaffolding project in D:\Projects\Testing\vue-auto-route... Done. Now run: cd vue-auto-route pnpm install pnpm dev
我们将选择 Select TypeScript。我还启用了 Router,以便它自动为我重新生成页面。
让 cd 进入我们的项目,并安装依赖项。因此,根据您使用的包管理器,您可以使用它。对我来说,我正在使用 pnpm,我开始喜欢它。现在,一旦我们的项目创建完成,我们就必须安装 unplugin-vue-router。
pnpm add -D unplugin-vue-router
现在,让我们更新 vite.config.ts 。 确保将插件放入索引 0。
import { fileURLToPath, URL } from "node:url"; import VueRouter from "unplugin-vue-router/vite"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ VueRouter({ /* options */ }), // ⚠️ Vue must be placed after VueRouter() vue(), ], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, });
接下来让我们更新 env.d.ts,以便我们的编辑器可以轻松找到我们的包的类型。
/// <reference types="vite/client" /> /// <reference types="unplugin-vue-router/client" />
然后让我们更新 src/router/index.ts 中的路由器index.ts。
import { createRouter, createWebHistory } from "vue-router"; import { routes, handleHotUpdate } from "vue-router/auto-routes"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, }); if (import.meta.hot) { handleHotUpdate(router); } export default router;
现在一切都完成了,我们现在可以创建 src/pages 目录,在这个文件夹或目录中我们添加页面,它会根据文件结构自动创建路由。如果你熟悉 Nuxt,那就是类似的东西。
让我们在 srcpagesabout.vue 中创建关于页面。
<template> <div>This is the about page</div> </template>
让我们使用 srcpagesindex.vue 中的索引来创建我们的主页。
<template> <div>This is Home Page</div> </template>
然后我们可以通过运行 dev 脚本来运行我们的 vue 应用程序。 PNPM 开发公司 就这样吧,如果您单击“主页”,您将被重定向到主页,如果您单击“关于”,您将被重定向到关于页面。
现在,一切都为您准备好了。如果您不熟悉路由器文件夹结构。您可以查看此文档https://uvr.esm.is/guide/file-based-routing.html。
让我们尝试添加一个 slug 组件,例如 src/pages/blog/[id].vue 并包含此内容。
<script setup> const { id } = useRoute().params; </script> <template> <div>This is the blog post with id: {{ id }}</div> </template>
现在让我们尝试再次运行 pnpm dev。当你访问 http://localhost:5173/blog/6 时,你应该会得到这个。
太棒了对吧?我希望这篇简短的博客对您的 VueJS 之旅有所帮助。祝你有美好的一天。
如果您喜欢这篇文章并想表达您的支持,您可以通过给我买杯咖啡来轻松实现。非常感谢您的贡献!
如果您喜欢这篇文章并想表达您的支持,您可以通过给我买杯咖啡来轻松实现。非常感谢您的贡献!
以上是Vue uto 通过文件结构进行路由的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。
