Vue3笔记——(三)hooks、路由
015 hooks
作用:使得代码更加模块化和可维护
Person.vue
<template><div><h2>当前求和{{ sum }}</h2><button @click="addFn">点我sum+1</button></div>
</template>
<script setup lang="ts" name="person">
import useSum from '@/hooks/useSum'
const { sum} = useSum()
useSum.ts
import { ref, reactive, onMounted } from "vue";
export default function () {// 数据let sum = ref(0);// 方法function addFn() {sum.value++;}//钩子onMounted(() => {console.log("useSum钩子函数");});return { sum, addFn };
}
015 命名路由
操作步骤:
1.绘制导航区、展示区
2.请来路由器
3.制定路由的具体规则(什么路由,对应什么组件)
注意点:
1.一般组件:亲手写标签 放在compunets
路由组件:考路由的规则渲染出来的 放在pages/views
2.通过点击导航,视觉效果上“消失”了的路由组件,默认是被卸载掉的,需要的时候再去挂载
history模式
mode:‘history’【vue2写法】
history:createWebHistory()【vue3写法】
优点:URL更加美观不带“#”,更接近传统的网站URL
缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误
location /{
try_files $uri $uri/ /index.html;
}
hash模式
优点:兼容性更好,因为不需要服务器端处理路径
缺点:URL带“#”不美观,且在SEO优化方面相对较差
to的三种写法
1.字符串写法
2.对象写法
to=“/home” 字符串写法
:to = “{path:‘/about’}”
:to = “{name:‘guanyu’}”
npm i vue-router
1.App.vue
<template><div class="app"><!-- 导航区 --><div class="navigate"><RouterLink to="/" active-class="xiaozhupeiqi">首页</RouterLink><RouterLink :to="{name:'xinwen'}" active-class="xiaozhupeiqi">新闻</RouterLink><RouterLink :to="{path:'/about'}" active-class="xiaozhupeiqi">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template>
import { RouterView, RouterLink } from 'vue-router'
2.创建路由器并暴露:src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({history: createWebHistory(),//路由工作模式routes: [{//引入一个一个可能要呈现的组件path: '/',name: 'home',component: HomeView},{ path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},],
})
export default router
3.main.js
// 引入用于创建应用
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");
016 嵌套路由
children:[{ name: “xxxx”, path: “xxxxx”, component: xxxxxxxx }]
const router = createRouter({history: createWebHistory(), //路由器的工作模式(稍后讲解)// history: createWebHashHistory(), //路由器的工作模式(稍后讲解)routes: [//一个一个的路由规则{ name: "zhuye", path: "/", component: Home },{ name: "guanyu", path: "/about", component: About },{name: "xinwen",path: "/news",component: News,children: [{ name: "xiangqing", path: "detail", component: Detail }],},],
});
<RouterLink :to="{path: '/news/detail'>{{ item.title }}</RouterLink>
016 嵌套参数
1.路由query参数
触发的地方:to="/news/detail?a=哈哈&b=你好"
接收的地方:
import {useRoute} from 'vue-router'
const route = useRoute();
route.query.a
<!-- 导航区 --><ul><li v-for="item in newList" :key="item.id"><!-- 第一种写法 --><RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink><!-- 第二种写法 --><RouterLink :to="{// path: '/news/detail', path或者name都可以name:'xiangqing',query: {id: item.id,title: item.title,content: item.content}}">{{ item.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div>
2.路由params参数
1.传递params参数时,若使用to的对象写法,必须使用name配置项,不能用path
2.传递params参数时,需要提前在规则中占位
<!-- 导航区 --><ul><li v-for="item in newList" :key="item.id"><!-- 第一种写法 --><!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> --><!-- 第二种写法 --><RouterLink :to="{name:'xiangqing',//只能写name不能写pathparams:{id:item.id,title:item.title,content:item.content}}">{{ item.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div>
const router = createRouter({history: createWebHistory(), //路由器的工作模式(稍后讲解)// history: createWebHashHistory(), //路由器的工作模式(稍后讲解)routes: [//一个一个的路由规则{ name: "zhuye", path: "/", component: Home },{name: "xinwen",path: "/news",component: News,children: [{name: "xiangqing",path: "detail/:id/:title/:content?",//第一种写法,?可传可不传component: Detail,},],},{ name: "guanyu", path: "/about", component: About },],
});
Detail.vue
<ul class="news-list"><li>编号:{{ route.params.id }}</li><li>标题:{{ route.params.title }}</li><li>内容:{{ route.params.content }}</li></ul>
016 路由规则的props配置
children: [{name: "xiangqing",path: "detail/:id/:title/:content?",component: Detail,// 第一种写法【props:true的作用相当于<Detail id="" title="" content=""/> 【只能params接收】】/* props: true, */// 第二种函数写法props(route) {console.log(">>>>>", route);return route.params;}, //params此处写法没有必要,props:true即可// 第三种对象写法:可以自己决定将什么作为props给路由组件/* props: {a: 100,b: 200,c: 500,}, */},],
016 路由replace属性
<!-- 导航区 --><div class="navigate"><RouterLink to="/" active-class="xiaozhupeiqi">首页</RouterLink><RouterLink :to="{ name: 'xinwen' }" active-class="xiaozhupeiqi">新闻</RouterLink><RouterLink replace :to="{ path: '/about' }" active-class="xiaozhupeiqi">关于</RouterLink></div>
016 路由编程式路由导航
push与to的写法一致
import { useRouter } from 'vue-router'
const router = useRouter();
router.push("/news")
router.replace({name: 'xiangqing',params: {id: item.id,title: item.title,content: item.content}})
017 路由重定向
router/index.ts
{ path: "/", redirect: "/home" },
相关文章:
Vue3笔记——(三)hooks、路由
015 hooks 作用:使得代码更加模块化和可维护 Person.vue <template><div><h2>当前求和{{ sum }}</h2><button click"addFn">点我sum1</button></div> </template> <script setup lang"ts"…...
网络安全大模型和人工智能场景及应用理解
本文通过通俗易懂的方式的进行阐述,大家读完觉得有帮助记得及时关注和点赞!!! 一、网络安全大模型的概述 网络安全大模型是一种用于识别和应对各种网络安全威胁的模型。它通过分析网络数据包、网络行为等信息,识别潜在…...
python-leetcode-从中序与后序遍历序列构造二叉树
106. 从中序与后序遍历序列构造二叉树 - 力扣(LeetCode) # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right r…...
NLP模型大对比:Transformer > RNN > n-gram
结论 Transformer 大于 RNN 大于 传统的n-gram n-gram VS Transformer 我们可以用一个 图书馆查询 的类比来解释它们的差异: 一、核心差异对比 维度n-gram 模型Transformer工作方式固定窗口的"近视观察员"全局关联的"侦探"依赖距离只能看前…...
MySQL查询优化(三):深度解读 MySQL客户端和服务端协议
如果需要从 MySQL 服务端获得很高的性能,最佳的方式就是花时间研究 MySQL 优化和执行查询的机制。一旦理解了这些,大部分的查询优化是有据可循的,从而使得整个查询优化的过程更有逻辑性。下图展示了 MySQL 执行查询的过程: 客户端…...
[STM32 - 野火] - - - 固件库学习笔记 - - -十三.高级定时器
一、高级定时器简介 高级定时器的简介在前面一章已经介绍过,可以点击下面链接了解,在这里进行一些补充。 [STM32 - 野火] - - - 固件库学习笔记 - - -十二.基本定时器 1.1 功能简介 1、高级定时器可以向上/向下/两边计数,还独有一个重复计…...
Antd React Form使用Radio嵌套多个Select和Input的处理
使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理,需要多层嵌套和处理默认事件和冒泡,具体实现过程直接上代码。 实现效果布局如下图 代码 <Formname"basic"form{form}labelWrap{...formItemLayoutSpan(5, 19)}onFinish{on…...
固有频率与模态分析
目录 引言 1. 固有频率:物体的“天生节奏” 1.1 定义 1.2 关键特点 1.3 实际意义 2. 有限元中的模态分析:给结构“体检振动” 2.1 模态分析的意义 2.2 实际案例 2.2.1 桥梁模态分析 2.2.2 飞机机翼模态分析 2.2.3 具体事例 3. 模态分析的工具…...
视频多模态模型——视频版ViT
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细解读多模态论文《ViViT: A Video Vision Transformer》,2021由google 提出用于视频处理的视觉 Transformer 模型,在视频多模态领域有…...
2859.计算K置位下标对应元素的和
示例 1:输入:nums [5,10,1,5,2], k 1 输出:13 解释:下标的二进制表示是: 0 0002 1 0012 2 0102 3 0112 4 1002 下标 1、2 和 4 在其二进制表示中都存在 k 1 个置位。 因此,答案为 nums[1] nums[…...
Redis 教程
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。 Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。 它通常被称为数据结构服务器&…...
2024 CVPR Highlight Learning-Feedback
图像增强 Towards Robust Event-guided Low-Light Image Enhancement: A Large-Scale Real-World Event-Image Dataset and Novel Approach 解决的主要问题是低光照条件下的图像增强 通过多尺度整体融合分支提取事件和图像的结构和纹理信息,并引入信噪比࿰…...
maven、npm、pip、yum官方镜像修改文档
文章目录 Maven阿里云网易华为腾讯云 Npm淘宝腾讯云 pip清华源阿里中科大华科 Yum 由于各博客繁杂,本文旨在记录各常见镜像官网,及其配置文档。常用镜像及配置可评论后加入 Maven 阿里云 官方文档 setting.xml <mirror><id>aliyunmaven&l…...
UE求职Demo开发日志#15 思路与任务梳理、找需要的资源
1 思路梳理 因为有点无从下手,就梳理下最终形态. 基地的建设我是想单独一个场景,同一个关卡中小怪会每次来都会刷,小解密一次性的,关键的Boss和精英怪不会重复刷,同时场景里放一些资源可收集,基地建设锁定区…...
设置jmeter外观颜色
设置jmeter外观颜色 方法: 步骤一、点击顶部选项 ->外观,这里提供了不同的主题,可选自己喜欢的风格。 步骤二、选择后,弹框提示点击Yes。...
《一文读懂!Q-learning状态-动作值函数的直观理解》
在人工智能的强化学习领域,Q-learning算法是一颗耀眼的明星,被广泛应用于机器人控制、游戏AI开发、自动驾驶等诸多前沿领域。而想要真正掌握Q-learning算法,理解其核心概念——状态 - 动作值函数,是绕不开的关键一步。这篇文章就带…...
Angular 2 表单深度解析
Angular 2 表单深度解析 引言 Angular 2作为现代前端开发的框架之一,以其灵活性和强大的功能赢得了众多开发者的青睐。在Angular 2中,表单处理是其中一个重要且复杂的部分。本文将深入解析Angular 2的表单,从基础知识到高级应用,旨在帮助开发者更好地理解和运用Angular 2…...
使用kitty terminal遇到的‘xterm-kitty‘: unknown terminal type.
解决办法 方式一 export TERMxterm-256color使永久生效 echo export TERMxterm-256color >> ~/.zshrc # 如果用 zsh,如果使用的是bash就修改为bashrc source ~/.zshrc #同理如果是ssh下遇到该问题,参考 https://sw.kovidgoyal.net/kitty/faq/…...
Dest1ny漏洞库:用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞(CNVD-2024-33023)
大家好,今天是Dest1ny漏洞库的专题!! 会时不时发送新的漏洞资讯!! 大家多多关注,多多点赞!!! 0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP,主要聚…...
代码随想录|动态规划 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组
300.最长递增子序列 题目 参考文章 思路:dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长度 因为没有连续,所以每一个元素都要比较,从而得到结果 两个递增子序列一定分别以nums[j]为结尾 和 nums[i]为结尾, 要不然这个比…...
Flutter_学习记录_导航和其他
Flutter 的导航页面跳转,是通过组件Navigator 和 组件MaterialPageRoute来实现的,Navigator提供了很多个方法,但是目前,我只记录我学习过程中接触到的方法: Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…...
【信息系统项目管理师-选择真题】2006下半年综合知识答案和详解
更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...
面向对象编程简史
注:本文为 “面向对象编程简史” 相关文章合辑。 英文引文,机翻未校。 Brief history of Object-Oriented Programming 面向对象编程简史 Tue, May 14, 2024 Throughout its history, object-oriented programming (OOP) has undergone significant …...
快速提升网站收录:内容创作的艺术
本文来自:百万收录网 原文链接:https://www.baiwanshoulu.com/15.html 快速提升网站收录,内容创作是关键。以下是一些关于内容创作以提升网站收录的艺术性建议: 一、关键词研究与优化 选择长尾关键词:进行深入的关键…...
高速PCB设计指南3——PCB 传输线和受控阻抗
高速PCB设计指南3——PCB 传输线和受控阻抗 1. 传输线1.1 传输线的定义1.2 传输线的分类1.3 互为传输线的情况 2. 均匀传输线的特性阻抗3. PCB中受控阻抗结构3.1 微带线(Microstrip)3.2 带状线(Stripline) 4 阻抗控制方法5. 阻抗控…...
python实现一个完整的智能教室能耗监测与管理系统的实现方案
以下是一个完整的智能教室能耗监测与管理系统的实现方案,主要使用Python语言,涵盖深度学习模型研发、教室场景适应性分析、系统架构设计、前端展示、后端服务以及测试评估等方面。 1. 数据准备 首先,需要收集教室的照片数据集,并…...
【新春特辑】2025年春节技术展望:蛇年里的科技创新与趋势预测
🔥【新春特辑】2025年春节技术展望:蛇年里的科技创新与趋势预测 📅 发布日期:2025年01月29日(大年初一) 在这个辞旧迎新的美好时刻,我们迎来了充满希望的2025年,也是十二生肖中的蛇…...
woocommerce独立站与wordpress独立站的最大区别是什么
WooCommerce独立站与WordPress独立站的最大区别在于它们的功能定位和使用场景。 WordPress是一个开源的内容管理系统(CMS),最初是作为博客平台发展起来的,但现在已经演变为一个功能丰富的网站构建工具。它主要用于创建动态网站,提供广泛的定…...
docker安装MySQL8:docker离线安装MySQL、docker在线安装MySQL、MySQL镜像下载、MySQL配置、MySQL命令
一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令 docker pull mysql:8.0.41 2、离线包下载 两种方式: 方式一: -)在一台能连外网的linux上安装docker执行第一步的命令下载镜像 -)导出 # 导出镜…...
PTA乙级1006~1010【c++】
1006 换个格式输出整数 #include <iostream> using namespace std;int main(){int n;cin >> n;int b n / 100;int s n / 10 % 10;int g n % 10;for (int i 0; i < b; i ) cout << B;for (int i 0; i < s; i ) cout << S;for (int i 0; …...
一文掌握ADB的安装及使用
文章目录 一、什么是ADB?二、 安装ADB2.1 下载ADB2.2 配置环境变量 三、连接Android设备四、 常用ADB命令五、ADB高级功能5.1 屏幕截图和录制5.2 模拟按键输入5.3 文件管理5.4 系统设置管理5.5 系统操作指令5.6 日志操作指令5.7 APK操作指令5.8 设备重启和恢复 六、…...
ThinkPad E480安装Ubuntu 18.04无线网卡驱动
个人博客地址:ThinkPad E480安装Ubuntu 18.04无线网卡驱动 | 一张假钞的真实世界 遗憾的是虽然下面的方法可以解决,但是内核升级后需要重新安装。 基本信息 Ubuntu 18.04ThinkPad E480使用下面的命令查看 Linux 内核: $ uname -r 5.0.0-3…...
QT+mysql+python 效果:
# This Python file uses the following encoding: utf-8 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QMessageBox from PySide6.QtGui import QStandardItemModel, QStandardItem # 导入需要的类# Important: # 你需要通过以下指令把 form.ui转为ui…...
关于 SR-IOV 架构论文的总结文章
关于 SR-IOV 架构论文的总结文章 在计算机虚拟化技术不断发展的进程中,SR - IOV 架构凭借其在提升 I/O 性能、优化资源利用等方面的优势,成为众多研究关注的焦点。通过对 4 篇相关论文的研读,我们可以从多个维度深入了解 SR - IOV 架构的核心要点。 一、SR - IOV 架构的原…...
MyBatis最佳实践:提升数据库交互效率的秘密武器
第一章:框架的概述: MyBatis 框架的概述: MyBatis 是一个优秀的基于 Java 的持久框架,内部对 JDBC 做了封装,使开发者只需要关注 SQL 语句,而不关注 JDBC 的代码,使开发变得更加的简单MyBatis 通…...
cursor ide配置远程ssh qt c++开发环境过程记录
cursor是啥就不介绍了,好像是目前最好用的ai ide,下面主要是配置远程ssh连接linux机器进行qt5 c程序运行的配置过程记录。 一、c_cpp_properties.json 在项目根目录的.vscode目录里面新建c_cpp_properties.json文件,根据你的实际情况配置该文…...
萌新学 Python 之数值处理函数 round 四舍五入、abs 绝对值、pow 幂次方、divmod 元组商和余数
关于数值处理的常用函数:round、abs、pow、divmod 1. round(数值[,小数位]) 四舍五入 说明:对数值进行四舍五入,小数位可以没有,也可以是负数(从小数点左边开始进行) round(数值[,小数位]) 四舍五入 #…...
vim交换文件的作用
1.数据恢复:因为vim异常的退出,使用交换文件可以恢复之前的修改内容。 2.防止多人同时编辑:vim检测到交换文件的存在,会给出提示,以避免一个文件同时被多人编辑。 (vim交换文件的工作原理:vim交换文件的工作…...
NoSQL与SQL比较
1.认识NoSQL NoSql可以翻译做Not Only Sql(不仅仅是SQL),或者是No Sql(非Sql的)数据库。是相对于传统关系型数据库而言,有很大差异的一种特殊的数据库,因此也称之为非关系型数据库。 1.1.结构…...
ThinkPHP 8模型与数据的插入、更新、删除
【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...
Ollama windows安装
Ollama 是一个开源项目,专注于帮助用户本地化运行大型语言模型(LLMs)。它提供了一个简单易用的框架,让开发者和个人用户能够在自己的设备上部署和运行 LLMs,而无需依赖云服务或外部 API。这对于需要数据隐私、离线使用…...
【PyTorch】4.张量拼接操作
个人主页:Icomi 在深度学习蓬勃发展的当下,PyTorch 是不可或缺的工具。它作为强大的深度学习框架,为构建和训练神经网络提供了高效且灵活的平台。神经网络作为人工智能的核心技术,能够处理复杂的数据模式。通过 PyTorch࿰…...
准备知识——旋转机械的频率和振动基础
旋转频率,也称为转速或旋转速率(符号ν,小写希腊字母nu,也作n),是物体绕轴旋转的频率。其国际单位制单位是秒的倒数(s −1 );其他常见测量单位包括赫兹(Hz)、每秒周期数(cps) 和每分钟转数(rpm)…...
STM32调试手段:重定向printf串口
引言 C语言中经常使用printf来输出调试信息,打印到屏幕。由于在单片机中没有屏幕,但是我们可以重定向printf,把数据打印到串口,从而在电脑端接收调试信息。这是除了debug外,另外一个非常有效的调试手段。 一、什么是pr…...
spring mvc 创建restapi 笔记
RestController RequestMapping("/spittles") public class SpittleController {// 示例:使用 RequestBody 接收 JSON 并自动转换为 Spittle 对象PostMappingpublic Spittle saveSpittle(RequestBody Spittle spittle) {// 此时 Spring 已经把请求体中的 …...
【C++】特殊类设计
目录 一、请设计一个类,不能被拷贝二、请设计一个类,只能在堆上创建对象三、请设计一个类,只能在栈上创建对象四、请设计一个类,不能被继承五、请设计一个类,只能创建一个对象(单例模式)5.1 饿汉模式5.2 懒汉模式 结尾…...
Java---入门基础篇(上)
前言 本片文章主要讲了刚学Java的一些基础内容,例如注释,标识符,数据类型和变量,运算符,还有逻辑控制等,记录的很详细,带你从简单的知识点再到练习题.如果学习了c语言的小伙伴会发现,这篇文章的内容和c语言大致相同. 而在下一篇文章里,我会讲解方法和数组的使用,也是Java中基础…...
Redis 消息队列详解
Redis 消息队列详解 Redis 作为一个高性能的内存数据库,支持多种实现消息队列的方式,主要包括: Redis List(基于列表的队列)Redis Pub/Sub(发布/订阅)Redis Stream(消息流…...
C语言编译过程全面解析
今天是2025年1月26日,农历腊月二十七,一个距离新春佳节仅一步之遥的日子。城市的喧嚣中,年味已悄然弥漫——能在这个时候坚持上班的人,真可称为“牛人”了吧,哈哈。。。。 此刻,我在重新审视那些曾被遗忘的…...
萌新学 Python 之运算符
Python 中运算符包括:算术运算符、比较运算符、逻辑运算符、赋值运算符、位运算符、海象运算符 算术运算符:加 减 - 乘 * 除 / 取整 // 求余 % 求幂 ** 注意:取整时,一正一负整除,向下取整 比如 5 // …...