当前位置: 首页 > news >正文

vue3和vite实现vue-router4版本路由的配置以及自动生成路由配置

这个是普通的手动路由配置:https://blog.csdn.net/weixin_68658847/article/details/130071101

自动路由配置

创建项目

npm create vite@latest my-vue-app -- --template vue
// 或者
yarn create vite my-vue-app --template vue
// 安装路由
yarn add vue-router@4.3.2
// 安装自动路径导入插件
yarn add vite-plugin-pages --dev

下面是项目结构

src
├─App.vue
├─main.js
├─style.css
├─views
|   ├─index.vue
|   ├─user
|   |[username].vue
|   ├─home
|   |  ├─index.vue
|   |  ├─iii
|   |  |  ├─[id].vue
|   |  |  ├─index.vue
|   |  |  ├─aaa
|   |  |  |  └index.vue
|   ├─about
|   |   └index.vue
├─router
|   └index.js
├─components
|     └HelloWorld.vue
├─assets
|   └vue.svg

在vite.config.js做以下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),Pages({// 这里可以配置插件选项,例如路由的目录等,这里我指定了遍历的文件夹是src/view目录dirs: [{ dir: 'src/views', baseRoute: '' }],}),],
})

在src/router/index.js下面做以下配置

import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'
console.log('routes',routes); // 这里打印的路由信息我粘贴到下面了
const router = createRouter({history: createWebHistory(),routes,
})export default router

在main.js配置一下

import { createApp } from 'vue'
import App from './App.vue'
import router from "/src/router/index.js";createApp(App)
.use(router)
.mount('#app')

App.vue使用

<script setup>
//演示一种,其他跳转一样
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const xj = () => {// router.push({//   name: "about",  // 第一种方式:根据name进行跳转//   query: {//     id: '0234567',  // 参数//   },// });router.push({path:'/user/1232' // 第二种方式:根据动态路由进行跳转,后面的1232就是参数});
}// 其他页面接受参数
// const route = useRoute();
// console.log(route.query.id)  // 接收第一种name值传参的参数// // 获取地址栏的参数
// console.log("route", route.params.username); // 接收第二种动态路由传参数的参数
</script><template><button @click="xj">点击跳转</button><router-view></router-view>
</template><style scoped></style>

上面的routers的打印数据如下
在这里插入图片描述
可以发现是以文件夹的名称进行匹配的,
例如

  • 如果下面有index.vue文件夹则就是当前目标页面,home/index.vue文件路径就是/home,
  • 如果某个文件夹下面起的名字不是index.vue则会将此文件名当路由,如/home/homeItem.vue则路由就是/home/homeItem
  • 动态路由的参考上面可以发现文件命名[username]就相当于是在路由后面动态拼接一个路径,例如user/[username]则路由为/user/:username

相关文章:

vue3和vite实现vue-router4版本路由的配置以及自动生成路由配置

这个是普通的手动路由配置&#xff1a;https://blog.csdn.net/weixin_68658847/article/details/130071101 自动路由配置 创建项目 npm create vitelatest my-vue-app -- --template vue // 或者 yarn create vite my-vue-app --template vue// 安装路由 yarn add vue-route…...

Flutter 中的 CupertinoDatePicker 小部件:全面指南

Flutter 中的 CupertinoDatePicker 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;CupertinoDatePicker 是 Cupertino 组件库的一部分&#xff0c;它提供了一个 iOS 风格的日期选择器。这个选择器允许用户选择日期和时间&#xff0c;非常适合需要符合 iOS 设计指南的应…...

用 Python 编写自动发送每日电子邮件报告的脚本

第一步&#xff1a;安装必要的库 你需要安装 smtplib&#xff08;Python 自带&#xff09;&#xff0c;但你需要安装 schedule 和 email 库。你可以使用以下命令安装这些库&#xff1a; pip install schedule第二步&#xff1a;编写发送邮件的脚本 这里是一个完整的 Python …...

IT人的拖延——渴望成功与害怕成功的矛盾

很多人都以为&#xff0c;害怕失败是拖延的主要诱因&#xff0c;但其实“害怕成功”也是拖延的主要诱因之一。要说这个原因&#xff0c;我们不得不提起Bible中的一个人“约拿”&#xff0c;让我们先来看看他的故事带给我们什么启示。 约拿情结简介 约拿是Bible中的一名先知&a…...

【全开源】场馆预定系统源码(ThinkPHP+FastAdmin+UniApp)

一款基于ThinkPHPFastAdminUniApp开发的多场馆场地预定小程序&#xff0c;提供运动场馆运营解决方案&#xff0c;适用于体育馆、羽毛球馆、兵乒球馆、篮球馆、网球馆等场馆。 场馆预定系统源码&#xff1a;打造高效便捷的预定体验 一、引言&#xff1a;数字化预定时代的来临 …...

音乐系统java在线音乐网站基于springboot+vue的音乐系统带万字文档

文章目录 音乐系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码和万字论文参考&#xff08;9.9&#xffe5;带走&#xff09; 音乐系统 一、项目演示 在线音乐系统 二、项目介绍 基于springbootvue的前后端分离在线音乐系…...

Python—面向对象小解(1)

一、面向对象 面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称 OOP&#xff09;是一种程序设计范式&#xff0c;它通过使用“对象”和“类”来组织代码。Python 是一种面向对象的编程语言&#xff0c;支持 OOP 的核心概念。 面向过程&#xff1a…...

2024最新TikTok抖音国际版,tiktok正版免拔卡安装来了!

保姆级教程&#xff01;2024最新TikTok抖音国际版&#xff0c;无限制&#xff01;tiktok正版免拔卡安装方法来了&#xff01; TikTok这款APP为何让全球都为之疯狂&#xff1f;因为它更懂人性&#xff0c;懂的人都懂&#xff01; 我是你的老朋友阿星&#xff0c;今天阿星要给大…...

【Python-OS】os.path.splitext()

作用&#xff1a;将文件路径分割成文件名和扩展名两部分。 slide_id, _ os.path.splitext(slide) print("slide:") print(slide) print("slide_id:") print(slide_id)注&#xff1a; slide是文件名&#xff0c;可以自行赋值...

安卓开发--安卓使用Echatrs绘制折线图

安卓开发--安卓使用Echatrs绘制折线图 前期资料安卓使用Echarts绘制折线图1.1 下载 Echarts 安卓资源1.2 新建assets文件1.3 新建布局文件1.4 在布局文件中布局WebView1.5 在活动文件中调用 最终效果 前期资料 Echarts 官网样式预览: https://echarts.apache.org/examples/zh/…...

每日5题Day9 - LeetCode 41 - 45

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;41. 缺失的第一个正数 - 力扣&#xff08;LeetCode&#xff09; 今天这道题没有ac&#xff0c;写不动了&#xff0c;下次再通过吧&#xff0c;先给个半成品下次回…...

进程间通信的方式中,socket和消息队列的区别

进程间通信的方式中&#xff0c;socket和消息队列的区别 进程间通信方式中&#xff0c;socket和消息队列的主要区别在于通信的方式和跨机通信的能力。 socket是通过网络传输的方式来实现进程间通信&#xff0c;并且可以跨主机&#xff1b;而消息队列是通过内核提供的缓冲区进…...

10. C++异步IO处理库和使用libevent实现高性能服务器

C比较有名的异步IO处理库 libevent 这个主要使用的是epoll。libevthplibuvlibev 我们主要介绍libevent。 libevent重要函数 event_base_new 这个可以对应于epoll_create也就是创建一个实例。还可以初始化libevent所有管理相关的代码。比如说所能用到的队列&#xff0c;栈&a…...

React里面useMemo和useCallBack的区别

useMemo 和 useCallback 接收的参数都是一样&#xff0c;第一个参数为回调&#xff0c;第二个参数为要依赖的数据。 相同部分&#xff1a;都是依赖数据发生变化&#xff0c;才会去更新缓存数据 不同部分&#xff1a; useMemo缓存的是二次计算的数据&#xff0c;主要用于缓存…...

css 渐变色边框

效果图&#xff1a; 代码&#xff1a; <style>:root{--br-radius: 12px;}.list{position: relative;}.list_tle{margin-top: 15px;margin-bottom: 5px;}.item{position: relative;display: inline-flex;} .br1 {padding: 10px 16px;clip-path: inset(0 round 6px);borde…...

prompt提示词:如何让AI帮你提一个好问题

我们看完一篇文章的时候&#xff0c;有时候发给AI后&#xff0c;不知道如何问AI&#xff0c;不知道问哪些问题&#xff0c;你使用这个提示词&#xff0c;就可以让AI帮你想一个好问题&#xff0c;然后你用AI想好的问题再去问AI 能提出一个好的问题是非常难的 提示词 结合文章…...

若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

动态横向滚动条 因为每次横向滑动都要到底部&#xff0c;引入插件 https://github.com/mizuka-wu/el-table-horizontal-scroll //动态横向滚动条移入样式 .el-table-horizontal-scrollbar :hover{//高度 变大10%transform: scaleY(1.5) translateY(-10%);//百分之八十亮度&a…...

CET-4 听力高频词

1. 生活故事 architect /ˈɑːkɪtekt/ n. 建筑师anxiety /ŋˈzaɪəti/ n. 焦虑attack /əˈtk/ v./n. 批评&#xff1b;攻击assume /əˈsjuːm/ v. 假定auditorium /ˌɔːdɪˈtɔːriəm/ n. 观众席&#xff1b;礼堂bonus /ˈbəʊnəs/ n. 奖金campaigner /kmˈpeɪnə…...

ARM鲲鹏920-oe2309-caffe

参考链接:Caffe | Installation 安装依赖包 dnf install dnf update dnf install leveldb-devel snappy-devel opencv.aarch64 boost-devel hdf5-devel gflags-devel glog-devel lmdb-devel openblas.aarch64 dnf install git wget tar gcc-g unzip automake libtool autoco…...

这款网站测试工具,炫酷且强大!【送源码】

随着互联网的普及和发展&#xff0c;Web 应用程序的数量也越来越多&#xff0c;各种网络问题也是层出不穷&#xff0c;因而监测这些 Web 应用程序的性能和可用性变得非常重要。 今天的文章&#xff0c;了不起和大家分享一款十分好用的的网站分析项目 - Web-Check。 项目简介 …...

3步掌握智慧树自动学习:解放双手的课程自动化神器

3步掌握智慧树自动学习&#xff1a;解放双手的课程自动化神器 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台繁琐的视频学习而烦恼吗&#xff1f;智慧…...

从零到一:WPR机器人仿真平台实战指南,快速掌握ROS机器人开发精髓

从零到一&#xff1a;WPR机器人仿真平台实战指南&#xff0c;快速掌握ROS机器人开发精髓 【免费下载链接】wpr_simulation 项目地址: https://gitcode.com/gh_mirrors/wp/wpr_simulation 你是否对机器人开发充满热情&#xff0c;却被高昂的硬件成本和复杂的调试过程吓退…...

Agent相关面试

Agent高频面试题1. 一分钟讲清楚 Agent 的定义Agent 是以大模型为推理大脑&#xff0c;具备感知、思考、规划、工具调用、记忆、执行迭代能力的智能体。不再是简单问答&#xff0c;而是能自主拆解复杂任务、自主选择工具、自主多轮推理、记忆上下文、闭环完成目标&#xff0c;可…...

GaussDB密码安全实战:从默认配置到企业级加固的完整操作指南

GaussDB密码安全实战&#xff1a;从默认配置到企业级加固的完整操作指南 接手一套新的GaussDB生产环境时&#xff0c;密码安全往往是DBA最容易忽视却又最致命的薄弱环节。去年某金融企业数据泄露事件的根源&#xff0c;正是由于沿用默认的MD5加密算法导致数万客户凭证被彩虹表破…...

Windows进程注入技术深度解析:从DLL注入到反射式加载

1. 项目概述与核心价值在Windows安全研究、恶意软件分析乃至一些高级的软件开发场景中&#xff0c;“进程注入”是一个绕不开的核心技术点。简单来说&#xff0c;它指的是将一个代码模块&#xff08;通常是DLL&#xff09;或一段代码&#xff08;Shellcode&#xff09;加载到另…...

解决Service broker not enable. Please activete it using ‘ALTER DATABASE My Database SET ENABLE BROKER

目录 1.问题 2.解决办法 3.说明 1.问题 网站运行报错&#xff1a;Service broker not enable. Please activete it using ALTER DATABASE My Database SET ENABLE BROKER 2.解决办法 服务代理&#xff08;Service Broker&#xff09;未启用。请使用 ALTER DATABASE [数据库…...

千川素材外包月烧3万,转易元AI自产省70%成本,跑量还更猛——真实账单对比

很多商家做千川投放时&#xff0c;最开始以为最贵的是投流预算&#xff0c;后来才发现&#xff0c;真正长期烧钱的其实是素材。计划每天要新视频&#xff0c;爆款跑起来要裂变&#xff0c;素材疲劳了要补货&#xff0c;全域推广还要不同场景、不同卖点、不同人群的素材矩阵。外…...

MySQL新手必看:Navicat导入SQL文件报错1046?三步搞定数据库选择问题

MySQL图形化工具避坑指南&#xff1a;彻底解决1046报错与数据库选择问题 刚接触MySQL的开发者&#xff0c;十有八九会在第一次导入SQL文件时遇到那个令人困惑的弹窗——"Error Code: 1046. No database selected"。这个看似简单的提示背后&#xff0c;其实隐藏着MySQ…...

STM32F407 HAL库驱动42步进电机:从CubeMX配置到代码调试的完整避坑指南

STM32F407 HAL库驱动42步进电机&#xff1a;从CubeMX配置到代码调试的完整避坑指南 在嵌入式开发领域&#xff0c;步进电机控制一直是工业自动化、3D打印和机器人控制等应用中的核心技术。对于刚接触STM32系列微控制器的开发者来说&#xff0c;使用HAL库驱动42步进电机可能会遇…...

vim入门配置教程

Vim 最简配置教程&#xff08;新手直接抄&#xff09; 1. 找到配置文件 Linux/Mac/WSL vim ~/.vimrcWindows 文件路径&#xff1a;C:\Users\用户名\_vimrc 2. 直接粘贴通用好用配置 " 基础设置 set number " 显示行号 set relativenumber " 相对行号 …...