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

【Vue3】路由基础

【Vue3】路由基础

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中路由的基本写法。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assetscomponents 目录。

3> 修改 src 目录下 main.ts

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 创建三个页面组件,注意与功能组件不同,不放在 src/components 目录下,页面组件一般放在 pagesviews 目录下。

  • Dashboard.vue

    <template><div class="dashboard">这是仪表盘页面</div>
    </template><script setup lang="ts">
    </script><style scoped lang="scss">
    </style>
    
  • System.vue

    <template><div class="system">这是系统管理页面</div>
    </template><script setup lang="ts">
    </script><style scoped lang="scss">
    </style>
    
  • About.vue

    <template><div class="about">这是关于页面</div>
    </template><script setup lang="ts">
    </script><style scoped lang="scss">
    </style>
    

5> 执行 npm i vue-router 命令安装路由组件。

6> 在 src 下创建 router 目录,并在其中创建 index.ts 文件,此文件作用是创建并暴露路由器。

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'const router = createRouter({// 路由器工作模式history: createWebHistory(),routes: [{path: '/dashboard',component: Dashboard},{path: '/system',component: System},{path: '/about',component: About}]
})export default router

7> 修改 main.ts 引入并使用路由器。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

8> 修改根组件 App.vue,调用路由器实现跳转功能。

<template><h1 class="title">Vue3路由</h1><hr><div class="route"><div class="menu"><div class="menu-item"><RouterLink to="/dashboard" active-class="active">仪表盘</RouterLink></div><div class="menu-item"><RouterLink to="/system" active-class="active">系统管理</RouterLink></div><div class="menu-item"><RouterLink to="/about" active-class="active">关于</RouterLink></div></div><div class="content"><RouterView /></div></div>
</template><script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script><style scoped lang="scss">
.title {text-align: center;
}
.route {display: flex;justify-content: center;.menu {width: 200px;height: 500px;background-color: #F1F2F3;border-radius: 6px;.menu-item {height: 40px;line-height: 40px;text-align: center;margin: 5px;border-radius: 3px;text-decoration: none;}.menu-item:hover {background-color: white;cursor: pointer}a {text-decoration: none;}.active {color: #00AEEC;}}.content {width: 600px;height: 500px;margin-left: 10px;border: 1px solid #F1F2F3;}
}
</style>

9> 执行命令 npm run dev 启动应用,浏览器访问:http://localhost:5173/,点击左侧菜单观察页面变化。
在这里插入图片描述

总结

关键步骤:

  1. 安装路由组件:npm i vue-router
  2. 创建并暴露路由器:src/router/index.ts,包括:
    • 引入 createRouter 用于创建路由器;
    • 通过 createRouter 参数对象的 history 属性配置路由器工作模式,路由器工作模式有两类:createWebHistory()createWebHashHistory(),本文使用的是 createWebHistory(),两类工作模式间的差异将在其他文章中说明;
    • 通过 createRouter 参数对象的 routes 属性配置路由,每个路由由一个路径 path 和一个组件 component 构成;
    • 暴露路由 export default router
  3. 引入路由器:src/main.ts,作用是:
    • 全局注册 RouterLinkRouterView 组件;
    • 添加全局 $router$route 属性;
    • 启用 useRouter()useRoute() 组合式函数;
    • 触发路由器解析初始路由。
  4. 使用 Vue Router 提供的组件实现路由功能:
    • RouterLink:代替常规的 <a> 标签创建链接,使得能够在不重新加载页面的情况下改变 URL,处理 URL 的生成、编码和其他功能;
    • RouterView:渲染当前 URL 路径对应的页面组件。

相关文章:

【Vue3】路由基础

【Vue3】路由基础 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。本…...

掌握网络数据的钥匙:Python Requests-HTML库深度解析

文章目录 掌握网络数据的钥匙&#xff1a;Python Requests-HTML库深度解析背景&#xff1a;为何选择Requests-HTML&#xff1f;什么是Requests-HTML&#xff1f;如何安装Requests-HTML&#xff1f;5个简单库函数的使用方法3个场景下库的使用示例常见Bug及解决方案总结 掌握网络…...

网络安全: 模型的脆弱性,鲁棒性和隐私性

在网络安全领域&#xff0c;通常描述模型安全性时&#xff0c;会提到以下三个特性&#xff1a; 脆弱性&#xff08;Vulnerability&#xff09;&#xff1a;指模型在某些情况下容易受到攻击或被利用的弱点。例如&#xff0c;模型可能对对抗性攻击或梯度泄露攻击敏感。 鲁棒性&a…...

【go语言】go-webview2用法(持续更新)

文章目录 背景核心接口和方法扩展接口遗憾的是 背景 目前为止&#xff0c;已经有很多优秀的electron应用。但其特点也很明显&#xff1a;使用htmlcssjs构建的布局很精致&#xff0c;但是体积不容小觑&#xff08;最新版electron-egg打包出来的程序已经300MB&#xff09;。 vs…...

KNN 图像识别

KNN&#xff08;K-Nearest Neighbors&#xff0c;K最近邻&#xff09;算法是一种简单而有效的分类算法&#xff0c;也可以用于图像识别。它的基本思想是通过计算样本之间的距离&#xff0c;将待分类的样本归为其在训练集中最相近的K个样本所属的类别中最常见的类别 1. 准备工作…...

基于STM32和云平台的花卉养护系统设计(微信小程序)(209)

文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】设计实现的功能【3】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】摘要【5】选题背景【6】国内外技术发展现状1.4 开发工具的…...

编程语言进化史

编程语言多到你想象不到。 图片来自: 程序设计语言概念 发展历史 自从1946年冯诺依曼原理被提出&#xff0c;计算机数据和指令是通过二进制形式以及后来的汇编语言(二进制助记符)&#xff0c;但依然没有改变容易出错的本质。1951年Rutishauser提出的用编译程序实现高级语言的思…...

vuex的原理和使用方法

简介 Vuex 是 Vue.js 应用的状态管理模式&#xff0c;它为应用内的所有组件提供集中式的状态&#xff08;数据&#xff09;管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。 Vuex的构成 state&#xff1a;state 是 Vuex 的数据中心&#xff0c;也就是说state是用来…...

(javaweb)SpringBootWeb案例(毕业设计)案例--文件上传

1.简介 前端程序和服务端程序 对于前端 html文件放在static目录下 location---文件提交的位置 右键--copy value -------------c盘目录下 2.本地上传--文件存储 1. 2. 使用uuid&#xff1a;保证文件名是唯一的 此时 并没有文件的拓展名--所以需要---写后缀 用字符串截取 此时图…...

数据库之存储过程和函数

目录 一、存储过程和函数概述 二、创建并调用存储过程和函数 1.创建存储过程 2.创建存储函数 3.调用存储过程和函数 三、关于存储过程和函数的表达式 1.变量 1.变量的分类 2.在存储过程和函数中应用变量 2.定义条件和处理程序 1.定义条件 2.定义处理程序 3.游标的…...

《SPSS零基础入门教程》学习笔记——02.数据管理

文章目录 2.1 连续变量的离散化2.2 自动重编码、编秩与数值计数2.3 几个常用过程2.4 多个数据文件的操作2.5 数据字典2.6 数据核查&#xff08;1&#xff09;数据验证模块&#xff08;2&#xff09;数据检验 2.7 数据准备 计算新变量&#xff08;转换 -> 计算变量&#xff0…...

嵌入式软件的一些常用调试测试方法

嵌入式软件的仿真调试测试是确保软件质量和功能正确性的关键步骤。以下是几种常见的仿真调试测试方式&#xff1a; 1.集成开发环境&#xff08;IDE&#xff09;调试&#xff1a; 使用IDE&#xff08;如IAR EWARM、Keil MDK、Eclipse等&#xff09;内置的调试器进行断点设置、单…...

Android T about screen rotation(二)

需求:客户因为模具问题,屏幕方向需要动态的变动.(方向: 0 , 90 , 180 ,270) 拆分:设备开机过程中图像显示可分为三个阶段,boot logo(1)->kernel logo(2),这一段的处理需要驱动层,所以暂时忽略. 开机动画 Bootanimation(3)阶段 和 Home Launcher应用显示(4)阶段是需要修改的…...

qt反射之类反射、方法反射、字段反射

话不多说&#xff0c;直接上代码&#xff1a; main.cpp: #include < QCoreApplication > #include “fstudent.h” #include “manage.h” int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); //注册类型 qRegisterMetaType(“FStudent”); Manage m…...

服务器数据恢复—raid5阵列离线硬盘强制上线失败如何恢复数据?

服务器数据恢复环境&#xff1a; 某品牌2850服务器上有一组由6块SCSI硬盘组建的raid5磁盘阵列&#xff0c;上层操作系统为Redhat linuxext3文件系统。 服务器故障&初检&#xff1a; 服务器在运行过程中突然瘫痪&#xff0c;管理员对服务器中的raid进行检查后发现有两块硬盘…...

FastAPI+Vue3零基础开发ERP系统项目实战课 20240815上课笔记 列表和字典相关方法的学习和练习

昨日回顾 1、大小写转换2、去除空格3、判断是否为数字4、前缀后缀 昨日练习题进度 练习&#xff1a;判断验证码是否正确 1、生成一个由四个字符组成的验证码字符串&#xff0c;要求有大写有小写&#xff0c;要求左右两边有空格2、打印到控制台3、让用户输入这个验证码&…...

基于微信小程序的诗词智能学习系统的设计与实现(全网独一无二,24年最新定做)

文章目录 前言&#xff1a; 博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为…...

httplib库:用C++11搭建轻量级HTTP服务器

目录 引言 一. httplib库概述 二. httplib核心组件 2.1 数据结构 2.2 类和函数 2.3 服务器搭建 ​编辑 结语 引言 在现代软件开发中&#xff0c;HTTP服务是网络应用的基础。对于需要快速搭建HTTP服务器或客户端的场景&#xff0c;使用成熟的第三方库可以极大提高开发效…...

基于嵌入式C++、SQLite、MQTT、Modbus和Web技术的工业物联网网关:从边缘计算到云端集成的全栈解决方案设计与实现

一、项目概述 1.1 项目目标与用途 随着工业4.0时代的到来&#xff0c;传统工业设备与现代信息技术的结合越来越紧密。物联网工业网关作为连接工业设备与云端平台的桥梁&#xff0c;在工业自动化、设备监控、远程运维等方面发挥着至关重要的作用。本项目旨在设计并实现一个能够…...

Chapter 38 设计模式

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、单例模式二、工厂模式 前言 在软件开发中&#xff0c;设计模式提供了一种可重用的解决方案&#xff0c;以应对在特定环境中反复出现的问题。这些模式是基于经验总结…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...