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

Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建

1、安装

npm install vue-router --registry=https://registry.npmmirror.com

2、配置路由模块

第一步:src/router/index.js创建文件

第二步:在src/view下面创建两个vue文件,一个叫Home.vue和About.vue

第三步:配置src/router/index.js文件

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About}å
]const router = createRouter({history: createWebHistory(),routes
})export default routes

3、main引入

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

 4、使用路由

在App.vue文件中使用

<template><div><router-view></router-view></div>
</template>

5、页面按钮切换路由(一级路由)

路由组件<router-link to="/"></router-link>

<template><div><router-link to="/">首页</router-link>|<router-link to="/about">about</router-link><router-view></router-view></div>
</template><script setup>
</script><style scoped>
</style>

6、页面按钮切换路由(二级路由) 

 第一步:新建两个页面,一个Foo.vue和Bar.vue;

第二步:src/router/index.js文件里引入且配置

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import Bar from '../view/Bar.vue'
import Foo from '../view/Foo.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About,children: [{path: 'foo',component: Foo,},{path: 'bar',component: Bar,}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router

第三步:在About.vue文件中配置二级路由和跳转

<template><div>AboutViewı<div><router-link to="/about/foo">foo</router-link>|<router-link to="/about/bar">bar</router-link></div><router-view></router-view></div>
</template><script>export default {name: 'AboutView'}
</script><style scoped></style>

二、动态路由模式

 1、第一步:将foo的path改成/:id

2、第二步:修改about.vue跳转路由

3、第三步:可以在foo.vue文件内拿到动态路由传递过来的值

$route.params.id

三、编程路由模式

1、路由跳转代码:this.$router.push('地址')

四、命名路由

注意:除了path外,还可以为任何路由提供name

优点

1、没有硬编码的URL

2、params的自动编码/解码

3、防止在url中出现打字错误

1、在router.js中给路由添加name属性 

2、将router-link的to写成动态传值模式

 

五、命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示 

六、路由原信息 

注意:有时,可能希望将任何信息附加到路由上,如过度名称、谁可以访问路由等。这些事情可以通过接受属性对象的meta属性来实现。 

如何拿到meta内的值?

 

七、路由传参 

1、query方式(显示)

一、通过连接方式传递

 

 

结果: 

二、通过name方式传递

2、params方式(显示)动态路由

3、params方式(隐式)

注意:点击刷新时,传递数据会消失

八、route对象和router对象

1、 route对象

 注意:route是进行获取操作,对当前路由进行操作

2、router对象

 注意:route是进行设置操作, 对所有路由进行方法的集合

 九、路由守卫

注意:提供的导航守卫主要用来通过跳转或取消的方式守卫导航,守卫主要有全局的,单个路由独享的,或者组件级的。

to:跳转到哪一个url

form:从哪一个url来的

next:决定进入到文件内,还是跳转到其他组件

1、全局路由守卫

 2、单个路由独享守卫

3、 组件级守卫

 

相关文章:

Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建 1、安装 npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块 第一步&#xff1a;src/router/index.js创建文件 第二步&#xff1a;在src/view下面创建两个vue文件&#xff0c;一个叫Home.vue和About.vue 第三步&#x…...

设置JAVA以适配华为2288HV2服务器的KVM控制台

华为2288HV2服务器比较老旧了&#xff0c;其管理控制台登录java配置比较麻烦&#xff0c;华为的ibmc_kvm_client_windows客户端测试了几个版本&#xff0c;连接控制台也有问题&#xff0c;最终安装JDK解决。 一、测试环境 主机为WindowsServer2012R2,64位系统 二、Java软件包…...

掌握Qt调试技术

文章目录 前言一、Qt调试的基本概念二、Qt调试工具三、Qt调试实践四、Q调试技巧五、总结前言 在软件开发中,调试是一个至关重要的环节。Qt作为一个广泛使用的跨平台C++图形用户界面应用程序开发框架,其调试技术也显得尤为重要。本文将深入探讨Qt调试技术,帮助读者更好地掌握…...

使用NVM自由切换nodejs版本

一、NVM介绍 在日常开发中&#xff0c;我们可能需要同时进行多个不同NodeJS版本的项目开发&#xff0c;每个项目所依赖的nodejs版本可能不一致&#xff0c;我们如果只安装一个版本的nodejs&#xff0c;就可能出现node版本冲突问题&#xff0c;导致项目无法启动。这种情况下&am…...

同三维T610UHK USB单路4K60采集卡

USB单路4K60HDMI采集卡,支持1路4K60HDMI输入和1路4K60HDMI环出&#xff0c;1路MIC输入1路Line IN音频输入和1路音频输出&#xff0c;录制支持4K60、1080P120,TYPE-C接口&#xff0c;环出支持1080P240 HDR 一、产品简介&#xff1a; 同三维T610UHK是一款USB单路4K60HDMI采集卡,…...

Git超详细笔记包含IDEA整合操作

git超详细笔记 文章目录 git超详细笔记第1章Git概述1.1、何为版本控制1.2、为什么需要版本控制1.3、版本控制工具1.4 、Git简史1.5、Git工作机制1.6 、Git和代码托管中心 第2章Git安装第3章Git常用命令3.1、设置用户签名3.2、初始化本地库本地库&#xff08;Local Repository&a…...

摩尔线程嵌入式面试题及参考答案(2万字长文)

说一下你对 drm 框架的理解。 DRM(Direct Rendering Manager)是 Linux 系统中用于管理图形显示设备的一个重要框架。 从架构层面来讲,它处于内核空间,主要目的是为用户空间的图形应用程序提供一个统一的接口来访问图形硬件。DRM 包括内核态的驱动模块和用户态的库。内核态的…...

C++ 编程基础(3)数据类型 | 3.1、指针

文章目录 一、指针1、定义2、解引用3、指针的运算4、指针与数组4.1、通过指针操作数据4.2、指针与数组名的区别4.3、数组名作为函数形参 5、指针作为函数参数5.1、作为函数参数5.2、常指针与指针常量 6、指针与动态内存分配7、注意事项8、总结 前言&#xff1a; 在C编程中&…...

nacos本地虚拟机搭建切换wiff问题

背景 在自己的电脑上搭建了vm虚拟机&#xff0c;安装上系统&#xff0c;设置网络连接。然后在vm的系统上安装了中间件nacos&#xff0c;mysql&#xff0c;redis等&#xff0c;后续用的中间件都是在虚拟机系统上安装的&#xff0c;开发在本地电脑上。 我本地启动项目总是请求到…...

打造完整 Transformer 编码器:逐步实现高效深度学习模块

11. encoder 打造完整 Transformer 编码器&#xff1a;逐步实现高效深度学习模块 在深入理解了编码器块的核心结构后&#xff0c;下一步就是实现一个完整的 Transformer 编码器。该编码器将输入序列转换为高级语义向量&#xff0c;并为后续的解码或其他任务模块提供高质量的特…...

软件对象粒度控制与设计模式在其中作用的例子

在软件设计中&#xff0c;确定对象的粒度&#xff08;Granularity&#xff09;是一个重要的考量因素&#xff0c;它决定了对象的职责范围和复杂程度。粒度过细或过粗都可能影响系统的可维护性和性能。设计模式可以帮助我们在不同层面控制粒度和管理对象之间的交互。以下是对每种…...

代码随想录算法训练营Day.3| 移除链表元素 设计链表 反转链表

长沙出差ing&#xff0c;今天的核心是链表&#xff0c;一个比较基础且重要的数据结构。对C的指针的使用&#xff0c;对象的创建&#xff0c;都比较考察&#xff0c;且重要。 203.移除链表元素 dummyNode虚拟头节点很重要&#xff0c;另外就是一个前后节点记录的问题。但是Leet…...

基于SSM的学生考勤管理系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…...

制作gif动图并穿插到CSDN文章中

在我们编写文档时&#xff0c;需要放一些动图来增加我们文章的阅读性&#xff0c;在这里为大家推荐一款好用的软件LICEcap 一、下载LICEcap软件 安装包以百度网盘的形式放在了文章末尾&#xff0c;下载完成后&#xff0c;会出现下面的图标 二、如何操作 双击图标运行 会出现…...

字段值为null就不返回的注解

1. 导包 <dependency><groupId>com.fasterxml.jackson.module</groupId><artifactId>jackson-module-kotlin</artifactId> </dependency>2. 类上加注解 JsonInclude(value JsonInclude.Include.NON_NULL)3. 示例 Data JsonInclude(valu…...

spring-boot(整合aop)

第一步导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency> 日志依赖 <dependency><groupId>org.springframework.boot</groupI…...

qt QStatusBar详解

1、概述 QStatusBar是Qt框架提供的一个小部件&#xff0c;用于在应用程序窗口底部显示状态信息。它可以显示一些固定的文本和图标&#xff0c;并且可以通过API动态更新显示内容。QStatusBar通常是一个水平的窗口部件&#xff0c;能够显示多行文本内容&#xff0c;非常适合用于…...

Docker Compose部署Powerjob

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…...

前端使用PDF.js把返回的base64或二进制文件流格式,实现pdf文件预览

pdf文件预览 简单了解PDF.js代码实现首先&#xff0c;引入依赖实现预览逻辑 简单了解PDF.js PDF.js是一个JavaScript库&#xff0c;可在浏览器中无插件显示PDF文件&#xff0c;提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码&#xff0c;如添加翻页和搜…...

如何利用 Python 的爬虫技术获取淘宝天猫商品的价格信息?

以下是使用 Python 的爬虫技术获取淘宝天猫商品价格信息的两种常见方法&#xff1a; 方法一&#xff1a;使用 Selenium 一、环境准备&#xff1a; 安装 selenium 库&#xff1a;在命令行中运行 pip install selenium。下载浏览器驱动&#xff1a;如 ChromeDriver&#xff08;确…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

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 …...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...