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

前端路由如何从0开始配置?vue-router 的使用

在 Web 开发中,路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用(SPA, Single Page Application)和服务器端渲染(SSR, Server-Side Rendering)应用中的一个重要概念。


在开发中如何去配置路由呢?

1、先安装对应的依赖包

npm add vue-router

在这里插入图片描述

2. 创建页面文件

  • 创建布局页面 src\views\layout\index.vue
  • 创建登录页面 src\views\login\index.vue

在这里插入图片描述

3. 创建路由

router/index.ts

import { createRouter, createMemoryHistory } from "vue-router";
import Layout from "@/views/layout/index.vue";// 创建一个路由器实例
const router = createRouter({history: createMemoryHistory(),routes: [{path: '/',component: Layout},{path: '/login',component: () => import('@/views/login/index.vue')}],
});export default router

配置对象中设置了 historycreateMemoryHistory(),这意味着路由将在内存中管理,不依赖于浏览器的历史记录。

4. 导入使用

main.ts中导入即可

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "normalize.css";
import "@/styles/common.less";
import router from '@/router/index'// 创建实例 app
const app = createApp(App)
// 挂载到 app
app.mount("#app");
// 在 app 安装插件 router
app.use(router)

推荐一个组件npm add vite-plugin-vue-setup-extend -D

vite-plugin-vue-setup-extend是一个 Vite 插件,旨在增强 Vue 3 的 <script setup> 语法。它提供了一些额外的功能和改进,以提高开发体验,特别是在使用 TypeScript 时。

  • 它可以改善在 <script setup> 中定义的变量、函数和组件属性的 TypeScript 类型推断。
  • 可以提供更好的自动补全支持,使得开发者可以在编辑器中更方便地编写代码。
  • 允许在其他地方引用 <script setup> 中定义的组件,并且能够正确识别其类型。
  • 通过生成 .d.ts 文件来暴露组件的类型信息,从而可以在项目中的其他地方导入并使用这些类型。
  • 与 Vite 和 Vue 3 完美集成,可以与其他 Vite 插件和工具链无缝协作。

相关文章:

前端路由如何从0开始配置?vue-router 的使用

在 Web 开发中&#xff0c;路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用&#xff08;SPA, Single Page Application&#xff09;和服务器端渲染&#xff08;SSR, Server-Side Rendering&#xff09;应用中的一个重要概念。 在开发中如何…...

Java中的运算符【与C语言的区别】

目录 1. 算术运算符 1.0 赋值运算符&#xff1a; 1.1 四则运算符&#xff1a; - * / % 【取余与C有点不同】 1.2 增量运算符&#xff1a; - * / % * 【右侧运算结果会自动转换类型】 1.3 自增、自减&#xff1a;、-- 2. 关系运算符 3. 逻辑运算符 3.1 短路求值 3.2 【…...

二、基础语法

入门了解 注释 **作用&#xff1a;**在代码中加一些注释和说明&#xff0c;方便自己或者其他程序员阅读代码 两种格式&#xff1a; 单行注释&#xff1a;// 描述信息 通常放在一行代码的上方&#xff0c;或者一条语句的末尾&#xff0c;对该行代码进行说明 多行注释&#x…...

DB-GPT系列(一):DB-GPT能帮你做什么?

DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL and Agents)&#xff0c;围绕大模型提供灵活、可拓展的AI原生数据应用管理与开发能力&#xff0c;可以帮助企业快速构建、部署智能AI数据应用&#xff0c;通过智能数据分析、洞察…...

【Python各个击破】numpy

简介 NumPy是一个开源的Python库&#xff0c;它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。它是大多数Python科学计算的基础&#xff0c;包括Pandas、SciPy和scikit-learn等库都建立在NumPy之上。 安装 !pip install numpy导入 import numpy as np用法 # …...

【STM32 Blue Pill编程实例】-4位7段数码管使用

4位7段数码管使用 文章目录 4位7段数码管使用1、7段数码介绍2、硬件准备与接线3、模块配置4、代码实现在本文中,我们将介绍如何将 STM32 Blue Pill开发板与 4 位 7 段数码管连接,并在 STM32CubeIDE 中对其进行编程。 在文章中首先将介绍 4 位 7 段数码管及其与 STM32 Blue Pi…...

[进阶]java基础之集合(三)数据结构

文章目录 数据结构概述常见的数据结构数据结构(栈)数据结构(队列)数据结构(数组)数据结构(链表) 数据结构 概述 数据结构是计算机底层存储、组织数据的方式。是指数据相互之间是以什么方式排列在一起的。数据结构是为了更加方便的管理和使用数据&#xff0c;需要结合具体的业…...

《Apache Cordova/PhoneGap 使用技巧分享》

一、引言 在移动应用开发的领域中&#xff0c;Apache Cordova&#xff08;也被称为 PhoneGap&#xff09;是一个强大的工具&#xff0c;它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术来构建跨平台的移动应用。这种方式不仅能够提高开发效率&#xff0c;还能降低开发成…...

SCP(Secure Copy

SCP&#xff08;Secure Copy&#xff09;‌是Linux系统下基于SSH协议的安全文件传输工具&#xff0c;用于在本地和远程主机间安全、快速地传输文件和目录。SCP命令通过加密传输确保数据的安全性&#xff0c;并且不占用过多系统资源‌。 SCP的基本用法 ‌基本语法‌&#xff1a…...

uniApp 省市区自定义数据

关于自定义省市区选择 其实也是用了 uniApp的内置组件 picker <picker mode"multiSelector" change"bindRegionChange" columnchange"bindMultiPickerColumnChange" :value"valueRegion" :range"multiArray"><v…...

图解Redis 06 | Hash数据类型的原理及应用场景

介绍 Hash 类型特别适合存储对象&#xff0c;例如用户信息等。 String类型也可以用于存储用户信息&#xff0c;Hash与String存储用户信息的区别如下图所示&#xff1a; 内部实现 Hash 类型 的底层数据结构是通过压缩列表&#xff08;Ziplist&#xff09;或哈希表&#xff…...

在 Windows 系统上设置 MySQL8.0以支持远程连接

在 Windows 系统上设置 MySQL8.0以支持远程连接的步骤如下&#xff1a; 步骤1: 修改 MySQL 配置文件1. 找到配置文件&#xff1a; MySQL 的配置文件通常为 my.ini&#xff0c;通常位于 C:\ProgramData\MySQL\MySQL Server8.0\&#xff08;确保查看隐藏文件和文件夹&#xff09…...

四种基本的编程命名规范

目前&#xff0c;共有四种基本的编程命名规范&#xff0c;分别是匈牙利命名法、驼峰式命名法、帕斯卡命名法和下划线命名法&#xff0c;其中前三种命名法较为流行。 例如&#xff1a;iMyData是一个匈牙利命名法&#xff1b;myData是一个驼峰式命名法&#xff1b;MyData是一个帕…...

【前端】在 TypeScript 中使用 AbortController 取消异步请求

在 TypeScript 中使用 AbortController 来取消异步请求&#xff0c;尤其是像 fetch 这样的请求&#xff0c;可以提供一种优雅的方式来中止长时间运行的操作。下面是一个详细的步骤说明&#xff0c;展示如何在 TypeScript 中使用 AbortController 取消 fetch 请求。 步骤 1&…...

k8s知识点总结

docker 名称空间 分类 Docker中的名称空间用于提供进程隔离&#xff0c;确保容器之间的资源相互独立。主要分类包括&#xff1a; PID Namespace&#xff1a;进程ID隔离&#xff0c;使每个容器有自己的进程树&#xff0c;容器内的进程不会干扰其他容器或主机上的进程。 NET Nam…...

论文阅读:三星-TinyClick

《Single-Turn Agent for Empowering GUI Automation》 赋能GUI自动化的单轮代理 摘要 我们介绍了一个用于图形用户界面&#xff08;GUI&#xff09;交互任务的单轮代理&#xff0c;使用了视觉语言模型Florence-2-Base。该代理的主要任务是识别与用户指令相对应的UI元素的屏幕…...

Windows on ARM上使用sherpa-onnx实现语音识别

Windows on ARM上使用sherpa-onnx实现语音识别 下载模型准备声音文件测试下载模型 模型所在的地址在这里(),通过git命令将模型下载下来 模型:hfd地址 git clone https://hf-mirror.com/csukuangfj/sherpa-onnx-streaming-paraformer-bilingual-zh-en将如下的代码保存成一个…...

Unity 打包AB Timeline 引用丢失,错误问题

1、裁剪 在 link.xml 添加 <assembly fullname"Unity.Timeline" preserve"all"/> 上面这一步我其实做了&#xff0c;但还是不行&#xff0c;各种搜索&#xff0c;不得解&#xff0c;还有创建一个空的Timeline 放到 Resources目录下的&#xff0c;也…...

【Kettle的安装与使用】使用Kettle实现mysql和hive的数据传输(使用Kettle将mysql数据导入hive、将hive数据导入mysql)

文章目录 一、安装1、解压2、修改字符集3、启动 二、实战1、将hive数据导入mysql2、将mysql数据导入到hive 一、安装 Kettle的安装包在文章结尾 1、解压 在windows中解压到一个非中文路径下 2、修改字符集 修改 spoon.bat 文件 "-Dfile.encodingUTF-8"3、启动…...

STM32的hal库在实现延时函数(例如:Delay_ms 等)为什么用滴答定时(Systick)而不是定时器定时中断,也不是RTC?

STM32的HAL库在实现延时函数&#xff08;如Delay_ms等&#xff09;时选择使用滴答定时器&#xff08;Systick&#xff09;而非定时器定时中断或RTC&#xff08;实时时钟&#xff09;&#xff0c;主要基于以下几个原因&#xff1a; Systick定时器的优势 集成在NVIC中&#xff…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...