【Vue框架】 router和route是什么关系

前言

之前没太注意,写着写着突然发现它们貌似不太一样,记录以下,回顾的看总结就好。

1、总结✨

route:当前激活路由的对象,用于访问和操作当前路由的信息
router:管理多个route的对象,整个应用的路由管理

在这里插入图片描述

2、详细了解

router是Vue Router的实例,它管理着应用程序的路由。它负责监听URL的变化,并根据配置的路由规则将请求导航到相应的组件。可以通过创建一个router实例,然后将其挂载到Vue根实例上来启用路由功能。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({router
}).$mount('#app');

在上述示例中,我们创建了一个router实例,并将其传递给Vue根实例的router选项,以启用路由功能。

route是当前路由的对象。它包含有关当前活动路由的信息,例如路径、参数、查询字符串等。在组件中,可以通过访问this.$route来访问当前route对象。

route对象具有许多属性,包括pathparamsqueryhash等等,用于访问和操作当前路由的相关信息。在组件中可以使用route对象来读取URL参数、查询字符串,或者在路由切换时进行相应的操作。

以下是一个简单的示例,展示了如何在组件中使用route对象:

<template><div><p>当前路由路径: {{ $route.path }}</p><p>当前路由参数: {{ $route.params }}</p><p>当前路由查询字符串: {{ $route.query }}</p></div>
</template><script>
export default {mounted() {console.log(this.$route.params);console.log(this.$route.query);}
}
</script>

在上面的示例中,我们在组件模板中使用了$route对象来显示当前路由的路径、参数和查询字符串。在mounted钩子中,我们通过$route.params$route.query来访问和打印路由的参数和查询字符串。

所以,可以说router用于整个应用的路由管理,而route是当前激活路由的对象,用于访问和操作当前路由的信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51310.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows下安装go环境 和vscode中go扩展

1. 首先安装GO Go下载地址&#xff1a;go.dev 选择相对应的版本&#xff0c;下载&#xff0c;运行安装程序&#xff0c;并打开命令提示符&#xff0c;运行 go env &#xff0c;确认已经安装go 注意关注其中GOPATH和GOROOT&#xff0c;这两个地址可以在系统环境变量中进行设置…

纸贵科技连续三年蝉联IDC中国 FinTech 50榜单

近日&#xff0c;国际权威市场研究机构IDC公布了“2023 IDC中国FinTech 50榜单”。作为领先的区块链技术和解决方案服务商&#xff0c;纸贵科技凭借过硬的区块链技术和丰富的金融科技创新成果&#xff0c;连续第三年荣登IDC中国FinTech 50榜单。 IDC中国FinTech 50榜单是金融科…

【Apollo】自动驾驶感知——毫米波雷达

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

Python科研数据可视化

在过去的20 年中&#xff0c;随着社会产生数据的大量增加&#xff0c;对数据的理解、解释与决策的需求也随之增加。而固定不变是人类本身&#xff0c;所以我们的大脑必须学会理解这些日益增加的数据信息。所谓“一图胜千言”&#xff0c;对于数量、规模与复杂性不断增加的数据&…

Java小游戏

一、需求 二、思路一 HP当然是怪物的一个属性成员&#xff0c;而武器是角色的一个属性成员&#xff0c;类型可以使字符串&#xff0c;用于描述目前角色所装备的武器。角色类有一个攻击方法&#xff0c;以被攻击怪物为参数&#xff0c;当实施一次攻击时&#xff0c;攻击方法被调…

阿里云配置MySQL-server 8.0远程登录

Ubuntu 22.04 LTS 安装MySQL-Server 8.0 # apt search mysql-server # apt install mysql-server重建服务 # service mysql stop # vi /etc/mysql/mysql.conf.d/mysqld.cnf ... bind-address 0.0.0.0 ... # service mysql start # lsof -i:3306 COMMAND PID USER FD …

创建k8s operator

目录 1.前提条件 2.进一步准备 2.1.安装golang 2.2.安装code&#xff08;vscode的linux版本&#xff09; 2.3.安装kubebuilder 3.开始创建Operator 3.1.什么是operator? 3.2.GV & GVK & GVR 3.3.创建operator 3.3.1. 生成工程框架 3.3.2.生成api(GVK) …

0101prox-shardingsphere-中间件

1 启动ShardingSphere-Proxy 1.1 获取 目前 ShardingSphere-Proxy 提供了 3 种获取方式&#xff1a; 二进制发布包DockerHelm 这里我们使用Docker安装。 1.2 使用Docker安装 step1&#xff1a;启动Docker容器 docker run -d \ -v /Users/gaogzhen/data/docker/shardings…

windows安装新openssl后依然显示旧版本

1、Windows环境下升级openssl后&#xff0c;通过指令openssl version -a查看版本号&#xff1a; 这个版本号是以前的老版本&#xff0c;不知道在哪里 2、网上找了老半天也没找到答案&#xff0c;最后通过指令 where openssl 才找到原来的openssl在哪里&#xff0c;把老的卸载掉…

【C# Programming】编程入门:数组、操作符、控制流

目录 一、数组 1、数组的声明 1.1 一维数组声明&#xff1a; 1.2 多维数组声明&#xff1a; 2、数组的实例化和赋值 2.1 数组在声明时通过在花括号中使用以逗号分隔的数据项对数组赋值&#xff0c; 例如&#xff1a; 2.2 如果在声明后赋值&#xff0c;则需…

数据采集:selenium 获取 CDN 厂家各省市节点 IP

写在前面 工作需要遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对…

如何使用CSS实现一个无限循环滚动的图片轮播效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐HTML 结构⭐ CSS 样式⭐ JavaScript 控制⭐ 注意事项&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff0…

数据集收集列表(opencv,机器学习,深度学习)持续更新

opencv 车牌识别数据集 opencv 手写数字识别数据集 机器学习 Pima Indians数据集&#xff0c;下载地址

Kyligence Copilot 登陆海外,斩获 Product Hunt 日榜 TOP 2

8月14日&#xff0c;AI 数智助理 Kyligence Copilot 在全球知名科技产品平台 Product Hunt 上线&#xff0c;其以出色的产品创新实力&#xff0c;在激烈的竞争中脱颖而出&#xff0c;仅仅在 24 小时内收获了超过 400 个投票和近 200 条支持评论&#xff0c;荣登当日产品榜排名第…

C++动态规划经典案例解析之合并石子

1. 前言 区间类型问题&#xff0c;指求一个数列中某一段区间的值&#xff0c;包括求和、最值等简单或复杂问题。此类问题也适用于动态规划思想。 如前缀和就是极简单的区间问题。如有如下数组&#xff1a; int nums[]{3,1,7,9,12,78,32,5,10,11,21,32,45,22}现给定区间信息[…

【Java 高阶】一文精通 Spring MVC - 标签库 (八)

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

提高nodejs中promise的性能

提高nodejs中promise的性能 我们先来看一个常见问题&#xff0c;假设我们有 N 条记录需要处理&#xff0c;或者例如&#xff0c;为每条记录发出 API 请求以获取数据。 通常情况下我们都是使用promise.all方法来实现这一需求&#xff1a; // 记录 const data [{}, {}, {}];/…

枚举和反射

枚举 枚举 枚举是一种特殊的类&#xff0c;它可以有自己的属性、方法和构造方法。 两种枚举的方法 自定义枚举 a.将构造器私有化&#xff0c;防止外部直接new b.去掉set方法&#xff0c;防止属性被修改 c.在内部直接创建固定的对象 通过类名直接去访问 关键字枚举 用…

2023.8各大浏览器11家对比:Edge/Chrome/Opera/Firefox/Tor/Vivaldi/Brave,安全性,速度,体积,内存占用

测试环境&#xff1a;全默认设置的情况下&#xff0c;均在全新的系统上进行测试&#xff0c;系统并未进行任何改动&#xff0c;没有杀毒软件&#xff0c;浏览器进程全部在后台&#xff0c;且为小窗模式&#xff0c;小窗分辨率均为浏览器厂商默认缩放大小(变量不唯一)&#xff0…

DevExpress WinForms数据编辑器组件,提供丰富的数据输入样式!(二)

DevExpress WinForms超过80个高影响力的WinForms编辑器和多用途控件&#xff0c;从屏蔽数据输入和内置数据验证到HTML格式化&#xff0c;DevExpress数据编辑库提供了无与伦比的数据编辑选项&#xff0c;包括用于独立数据编辑或用于容器控件(如Grid, TreeList和Ribbon)的单元格。…