vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程

不再需要为每一个路由编写冗长的 routes 配置啦,新建文件便可自动生成路由!

使用方法

1. 安装 unplugin-vue-router

npm i -D unplugin-vue-router

2. 修改 vite 配置

vite.config.ts

import VueRouter from 'unplugin-vue-router/vite'

plugins 中加入 VueRouter ,注意其必须在 vue() 之前

  plugins: [// VueRouter  必须在 vue() 之前VueRouter({}),vue(),vueJsx(),vueDevTools()],

3. 修改路由配置

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
const router = createRouter({history: createWebHistory(),routes
})
export default router

src/App.vue 中为

<template><RouterView />
</template>
  • 组件 RouterView 和 RouterLink 都是全局注册的,因此无需导入。见官网

自动路由规则

默认情况下,会为 src/pages 中的文件自动创建路由(可以通过配置修改为其他目录,但不建议这么做)

推荐的页面目录结构 :

在这里插入图片描述

自动路由效果为 :

路由文件
/pages/index.vue
/aboutpages/about.vue
/userspages/users/index.vue
/users/1pages/users/[id].vue
/otherpages/[…404].vue
  • index.vue 的路由为 / 不是 /index
  • [id].vue 会得到动态路由,与 vue-router 中的 /:id 效果相同

比如 [id].vue 的内容为

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script><template><div>用户详情</div><p>id:{{ route.params.id }}</p>
</template><style scoped lang="scss"></style>

则访问 http://localhost:5173/users/1 的效果为:

用户详情
id:1
  • […404].vue 用于匹配所有不存在的路由,内容通常为 404 页面。
<template><div>404</div>
</template>
[...404].vue 中的 404 也可以自定义为任意其他的字符串,如 path,all 等,效果一样,此处为了方便识别为 404 页面,用的 404

自定义路由

当自动路由无法满足需求时,可以参考下方代码自定义路由

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
const router = createRouter({history: createWebHistory(),routes: [...routes,// 自定义配置路由 /test ,访问文件 src/views/test.vue{path: '/test',component: () => import('@/views/test.vue')}]
})
export default router

更多配置和用法见官网

https://uvr.esm.is/guide/configuration.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

消费疲软,预期一下债券的平均收益

在预测消费疲软对债券平均收益的影响时&#xff0c;我们需要考虑多个因素&#xff0c;包括宏观经济环境、货币政策、通胀预期以及债券市场的具体表现等。以下是对债券平均收益的预期分析&#xff1a; 宏观经济环境与货币政策&#xff1a; 当前中国经济增速已转向高质量发展阶段…

【Redis一】Redis配置与优化

目录 一.关系型数据库与非关系型数据库 1.关系型数据库 2.非关系型数据库 3.二者区别 4.非关系型数据库产生背景 5.NoSQL与SQL数据记录对比 关系型数据库 非关系型数据库 二.Redis相关概述 1.简介 2.五大数据类型 3.优缺点 3.1.优点 3.2.缺点 4.使用场景 5.采用…

苹果应用Testflight上架完整步聚

1.全部选中下图内容,包含iPhone与iPad屏幕所有旋转方向 2. 准备App图标,一定要有152和167这个尺寸,不然后提交不过 3.1024这个尺寸的的图像不能有透明层,不然提交不通过 4.选中编译设备为Any iOS Device[arm64] 5.选择Product下的Archive进行生成 6.在弹出的窗口中选择Test…

Python之三大基本库——Numpy(2)

接着上次的内容接着讲&#xff0c;连续号都续上哈 七、numpu中random的随机生成函数 以下总结的是比较常用到的函数&#xff1a; 下面分别介绍一下不用的用法&#xff1a; 首先导入创建函数 import numpy as np np.random.seed(666)1、 rand(d0,d1,d2,...,dn)&#xff1a;返…

JavaWeb系列三: JavaScript学习 下

文章目录 js数组定义方式数组遍历 js函数函数入门函数使用方式使用方式一使用方式二 函数注意事项函数练习题 定义对象使用object定义使用{}定义 事件onload事件onclick事件失去焦点事件内容发生改变事件表单提交事件静态注册动态注册表单作业 dom对象文档对象模型document对象…

JDK-调度线程池

归档 GitHub: JDK-调度线程池 使用示例 https://github.com/zengxf/small-frame-demo/blob/master/jdk-demo/simple-demo/src/main/java/test/jdkapi/juc/thread_pool/TestSchedule.java JDK 版本 openjdk version "17" 2021-09-14 OpenJDK Runtime Environment…

边缘计算VNC智能盒子如何助力HMI设备实现二次开发?

HMI&#xff08;Human-Machine Interface&#xff09;又称人机界面&#xff0c;是用户与机器之间交互和通信的媒介。今天带你了解智能盒子如何助力HMI设备实现二次开发&#xff1f; HMI设备被广泛应用在工业自动化中&#xff0c;具有显示设备信息&#xff0c;实时监测&#xf…

python爬虫--scrapy框架

Scrapy 一 介绍 Scrapy简介 1.Scrapy是用纯Python实现一个为了爬取网站数据、提取结构性数据而编写的应用框架&#xff0c;用途非常广泛2.框架的力量&#xff0c;用户只需要定制开发几个模块就可以轻松的实现一个爬虫&#xff0c;用来抓取网页内容以及各种图片&#xff0c;非…

GPT-5对普通人有何影响

这篇文章对ChatGPT的使用方法和提问技巧进行了讨论&#xff0c;重点强调了背景信息和具体提问的重要性。文章清晰地传达了如何提高ChatGPT回答的质量&#xff0c;以及个人在使用ChatGPT时的体会和建议。然而&#xff0c;文章在逻辑组织和表达方面还有一些可以改进的地方&#x…

Spring Boot与分布式事务的最佳实践

Spring Boot与分布式事务的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨在Spring Boot应用中如何实现分布式事务的最佳实践。 什么是…

Android Launcher-----MainThreadInitializedObject介绍

MainThreadInitializedObject 是 Android 开发中用于确保对象在主线程上初始化的一种设计模式 一、用途 MainThreadInitializedObject 通常用于确保那些需要在主线程上创建的对象&#xff08;比如UI组件或依赖于主线程环境的对象&#xff09;能够安全地进行初始化 二、优点 …

LeetCode.438找到字符串中所有字母异位词

问题描述 给定两个字符串s和p&#xff0c;找到s中所有p的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 解题思路1 注意&#xff1a;该解题思路是错误的&am…

Microsoft VBA Excel 操控 Access资料表和查询代码进行搬运操作

问题场景 Run_NoSource_AddressSource_FileDestination_AddressDestination_FileCopy_IndicatorRun_Start_Time1C:\Users\EP\path\to\FileSSS-1.MDBC:\Users\EP\path\to\FileSSC-1.MDBY2C:\Users\EP\path\to\FileSSS-2.MDBC:\Users\EP\path\to\FileSSC-2.MDBY3C:\Users\EP\pat…

NC参照 根据名称转换为主键值,如部门、人员等参照根据部门名称、人员名称获取对应的主键值

NC参照 根据名称转换为主键值&#xff0c;如部门、人员等参照根据部门名称、人员名称获取对应的主键值 private BillCardPanel getEditBillCardPanel() {return getEditor().getBillCardPanel(); }private BillData getEditorBillData() {return this.getEditor().getBillCard…

静态库和动态库

1、编译过程 1.预处理&#xff1a;解释并展开源程序当中的所有的预处理指令&#xff0c;此时生成 *.i 文件。 2.编译&#xff1a;词法和语法的分析&#xff0c;生成对应硬件平台的汇编语言文件&#xff0c;此时生成 *.s 文件。 3.汇编&#xff1a;将汇编语言文件翻译为对应处理…

便携式烟气监测仪的应用主要有哪些?

烟气分析仪是一种用于检测和分析烟气中各种成分和污染物含量的仪器&#xff0c;通过采集和处理烟气样品&#xff0c;对其中的各种成分进行定量分析。那么&#xff0c;便携式烟气监测仪的应用主要有哪些&#xff1f;为方便大家了解&#xff0c;下面就让小编来为大家简单介绍一下…

2-2到2-4

计算出所有人的平均年龄&#xff1a; val lines sc.textFile("/root/data/scala/people/page.txt") val count lines.count() val total lines.map(line > line.split(" ")(1)).map(t>t.trim.toInt).collect().reduce((a,b)>ab) val avgAge …

如何防止SQL注入

为了防止SQL注入攻击&#xff0c;可以采取以下一系列的安全措施&#xff0c;这些措施结合了多篇参考文章中的关键信息和方法&#xff1a; 使用参数化查询或预编译语句&#xff1a; 这是防止SQL注入的最常见且最有效的方法之一。通过将用户输入的数据作为参数传递给SQL查询语句…

[Python]根据文件路径获取文件所在目录、文件名和后缀名

一、简介 本文介绍了在python中如何根据文件的路径名字&#xff08;字符串&#xff09;获取文件所在目录名、文件名&#xff08;带后缀&#xff09;、文件名&#xff08;无后缀&#xff09;和文件后缀名。 二、代码 假设文件路径为/home/user/temp.txt&#xff0c;使用以下代…

压缩pdf文件大小的方法,如何压缩pdf格式的大小

pdf太大怎么压缩&#xff1f;当你需要通过电子邮件发送一个PDF文件&#xff0c;却发现文件太大无法成功发出时&#xff0c;这些情况下&#xff0c;我们都需要找到一种方法来压缩PDF文件&#xff0c;以便更便捷地进行分享和传输。PDF文件的大小通常与其中包含的图片、图形和文本…