router和route的区别
简单理解为,route是用来获取路由信息的,router是用来操作路由的。
一、router
router是VueRouter的实例,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。例如history对象
$router对象是全局路由的实例,是router构造方法的实例
1. $router.go()
$router.back 后退
页面路由跳转 $router.go(-1)为后退,$router.go(-1)为前进 $router.forward()为前进
2. $router.push()
- 字符串this.$router.push('home')
- 对象this.$router.push({path:'home'})
- 命名的路由this.$router.push({name:'user',params:{userId:123}})
- 带查询参数,变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})
- push方法其实和<router-link :to="...">是等同的。
*注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
3. $router.replace() 常用来做404页面
push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
不会向 history 栈添加一个新的记录
this.$router.replace('/') 跳转到首页
二、route
route是路由信息对象,每一个路由都会有一个route对象,是一个局部的对象,里面主要包含路由的一些基本信息,比如name、meta、path、hash、query、params、fullPath、matched、redirectedFrom...
1. $route.name
当前路径名字
2. $route.meta
路由元信息
3. $route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/bar"。
4. $route.hash
当前路由的hash值 (不带#) ,如果没有 hash 值,则为空字符串。锚点*
5. $route.query
一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有$route.query.user == 1,对于 /index?id=1 ,会得到 $route.query.id == 1。如果没有查询参数,则是个空对象。
6. $route.params
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
7. $route.fullPath
完成解析后的 URL,包含查询参数和hash的完整路径。
8. $route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
原文链接:https://blog.csdn.net/Senora/article/details/125237003
相关文章:
router和route的区别
简单理解为,route是用来获取路由信息的,router是用来操作路由的。 一、router router是VueRouter的实例,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所…...
每日后端面试5题 第五天
一、Redis的常用数据类型有哪些,简单说一下常用数据类型特点 1.字符串string 最基本的数据存储类型,普通字符串 SET key value 2.哈希hash 类似于Java中HashMap的结构 HSET key field value 3.列表list 按照插入顺序排序,操作左边或右…...
BGP基础实验
题目 IP地址配置 R1 R2 R3 R4 R5 AS2内全网通 R2: ospf 1 router-id 2.2.2.2 area 0.0.0.0 network 2.2.2.0 0.0.0.255 network 23.1.1.0 0.0.0.255 R3: ospf 1 router-id 3.3.3.3 area 0.0.0.0 network 3.3.3.0 0.0.0.255 network 23.…...
在excel中整理sql语句
数据准备 CREATE TABLE t_test (id varchar(32) NOT NULL,title varchar(255) DEFAULT NULL,date datetime DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; INSERT INTO t_test VALUES (87896cf20b5a4043b841351c2fd9271f,张三1,2023/6/8 14:06); INSERT INTO t_test …...
Vue中下载不同文件的几种方式
当在Vue中需要实现文件下载功能时,我们可以有多种方式来完成。下面将介绍五种常用的方法。 1. 使用window.open方法下载文件 <template><div><button click"downloadFile(file1.pdf)">下载文件1</button><button click"…...
Ethernet/ip协议开发记录
目录 简介 一:EtherNet/IP 二:CIP 1. CIP 对象模型 2. CIP 服务 3. CIP 对象库...
Spring系列三:基于注解配置bean
文章目录 💗通过注解配置bean🍝基本介绍🍝快速入门🍝注意事项和细节 💗自己实现Spring注解配置Bean机制🍝思路分析🍝注意事项和细节 💗自动装配 Autowired🍝案例1: Autow…...
git的简单介绍和使用
git学习 1. 概念git和svn的区别和优势1.1 区别1.2 git优势 2. git的三个状态和三个阶段2.1 三个状态:2.2 三个阶段: 3. 常用的git命令3.1 下面是最常用的命令3.2 git命令操作流程图如下: 4. 分支内容学习4.1 项目远程仓库4.2 项目本地仓库4.3…...
UNet Model
论文地址 第一阶段 conv2d(33) first conv:5725721 → 57057064 second conv:57057064 → 56856864 代码 # first 33 convolutional layer self.first nn.Conv2d(in_channels, out_channels, kernel_size3, padding1) self.act1 nn.ReLU() # Seco…...
vue+iviewUi+oss直传阿里云上传文件
前端实现文件上传到oss(阿里云)适用于vue、react、uni-app,获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云,保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss&…...
算法leetcode|68. 文本左右对齐(rust重拳出击)
文章目录 68. 文本左右对齐:样例 1:样例 2:样例 3:提示: 分析:题解:rust:go:c:python:java: 68. 文本左右对齐: 给定一个…...
基于MATLAB实现小波算法仿真(附上多个完整源码+数据集)
小波变换是一种常用的信号处理技术,广泛应用于图像处理、音频处理、压缩等领域。本文将介绍MATLAB中小波变换的基本原理和实现方法,并给出一个示例来说明如何使用MATLAB进行小波变换和逆变换。 文章目录 1. 引言2. 小波变换的基本原理3. MATLAB中的小波变…...
【深度学习注意力机制系列】—— CBAM注意力机制(附pytorch实现)
CBAM(Convolutional Block Attention Module)是一种用于增强卷积神经网络(CNN)性能的注意力机制模块。它由Sanghyun Woo等人在2018年的论文[1807.06521] CBAM: Convolutional Block Attention Module (arxiv.org)中提出。CBAM的主…...
【资料分享】全志科技T507-H工业核心板规格书
1 核心板简介 创龙科技SOM-TLT507是一款基于全志科技T507-H处理器设计的4核ARM Cortex-A53全国产工业核心板,主频高达1.416GHz。核心板CPU、ROM、RAM、电源、晶振等所有元器件均采用国产工业级方案,国产化率100%。 核心板通过邮票孔连接方式引出MIPI C…...
Profibus-DP转modbus RTU网关modbus rtu和tcp的区别
捷米JM-DPM-RTU网关在Profibus总线侧实现主站功能,在Modbus串口侧实现从站功能。可将ProfibusDP协议的设备(如:EH流量计、倍福编码器等)接入到Modbus网络中;通过增加DP/PA耦合器,也可将Profibus PA从站接入…...
AlmaLinux 9 安装 Edge 和 Chrome
AlmaLinux 9 安装 Edge 和 Chrome 1. 安装 Edge2. 安装 Chrome 1. 安装 Edge 更新源, sudo dnf update -y # sudo dnf install dnf-utils -y添加 Edge 源, sudo dnf config-manager --add-repo https://packages.microsoft.com/yumrepos/edge再次更新…...
NGINX——负载均衡
负载均衡————>通过反向代理来实现 nginx反向代理的七层代理和四层代理 七层代理: 七层代理时最常用的反向代理方式,其只能配置在nginx的配置文件的http模块中,而且方法名称必须要定义成“upstream”模块,注意不能写在se…...
C#实现端口扫描和执行cmd命令、调用摄像头
C#端口扫描 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Threading;namespace PortScanner {class Program{static void Main(string[] args){// 设置扫描参数string host "localho…...
【图像恢复】基于交替乘子方法(ADMM)图像恢复算法研究[固定点收敛和应用](Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考
目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候,显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...
Docker、Wsl 打包迁移环境
电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本: 2.2.4.0 内核版本: 5.15.153.1-2 WSLg 版本: 1.0.61 MSRDC 版本: 1.2.5326 Direct3D 版本: 1.611.1-81528511 DXCore 版本: 10.0.2609…...
npm安装electron下载太慢,导致报错
npm安装electron下载太慢,导致报错 背景 想学习electron框架做个桌面应用,卡在了安装依赖(无语了)。。。一开始以为node版本或者npm版本太低问题,调整版本后还是报错。偶尔执行install命令后,可以开始下载…...
Oracle实用参考(13)——Oracle for Linux物理DG环境搭建(2)
13.2. Oracle for Linux物理DG环境搭建 Oracle 数据库的DataGuard技术方案,业界也称为DG,其在数据库高可用、容灾及负载分离等方面,都有着非常广泛的应用,对此,前面相关章节已做过较为详尽的讲解,此处不再赘述。 需要说明的是, DG方案又分为物理DG和逻辑DG,两者的搭建…...
