【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.hqwc.cn/news/81233.html

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

相关文章

opencv-疲劳检测-眨眼检测

#导入工具包 from scipy.spatial import distance as dist from collections import OrderedDict import numpy as np import argparse import time import dlib import cv2FACIAL_LANDMARKS_68_IDXS OrderedDict([("mouth", (48, 68)),("right_eyebrow",…

SAP ABAPG开发屏幕自动生成日期的搜索帮助

代码如下&#xff1a; REPORT z_jason_test_f4 . TABLES: s031. PARAMETER p_spmon TYPE spmon DEFAULT sy-datum0(6) OBLIGATORY. SELECT-OPTIONS s_spmon FOR s031-spmon DEFAULT sy-datum0(6) OBLIGATORY. AT SELECTION-SCREEN ON VALUE-REQUEST…

C#系统锁屏事件例子 - 开源研究系列文章

今天有个网友问了个关于操作系统锁屏的问题。 我们知道&#xff0c;操作系统是基于消息和事件处理的&#xff0c;所以我们只要找到该操作系统锁屏和解屏的那个事件&#xff0c;然后在事件里进行处理即可。下面是例子介绍。 1、 项目目录&#xff1b; 下面是项目目录&#xff1a…

STL vector基本用法

目录 vector介绍vector的使用vector的定义vector接口函数构造函数和赋值重载迭代器元素访问vector容量相关函数vector增加 删除 修改操作关系操作符 vector介绍 vector是可变大小数组的序列容器。像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可…

Datawhale Django后端开发入门 TASK03 QuerySet和Instance、APIVIew

一、QuerySet QuerySet 是 Django 中的一个查询集合&#xff0c;它是由 Model.objects 方法返回的&#xff0c;并且可以用于生成数据库中所有满足一定条件的对象的列表。 QuerySet 在 Django 中表示从数据库中获取的对象集合,它是一个可迭代的、类似列表的对象集合。主要特点…

睿思BI旗舰版V5.3正式发布

发布时间&#xff1a;2023-7-20 主要更新内容: 1.增加3D地图功能 2.增加水球图 3.增加扇形图&#xff0c;在数据大屏 - 自定义组件中定义。 4.增加指标引导线功能&#xff0c;在数据大屏 - 自定义组件中定义。 5.详情页增加回调函数功能。 6.大屏/仪表盘模版下载&#xff0c;…

java八股文面试[JVM]——JVM参数

参考&#xff1a;JVM学习笔记&#xff08;一&#xff09;_卷心菜不卷Iris的博客-CSDN博客 堆参数调优入门 jdk1.7&#xff1a; jdk1.8&#xff1a; 面试题&#xff1a;给定-Xms Xmx -Xmn 问 最大的eden区域是多少M。 常用JVM参数 怎么对jvm进行调优&#xff1f;通过参数配…

Keepalived+Lvs(dr)调度器主备配置小实验

目录 前言 一、实验拓扑图 二、配置LVS&#xff08;dr&#xff09;模式 三、配置调配器热备 四、测试 总结 前言 Keepalived和LVS&#xff08;Linux Virtual Server&#xff09;是两个常用的开源软件&#xff0c;通常结合使用以提供高可用性和负载均衡的解决方案。 Keepalive…

Go 1.21中值得关注的几个变化

美国时间2023年8月8日&#xff0c;Go团队在Go官博上正式发布了1.21版本[2]&#xff01; 早在今年4月末&#xff0c;我就撰写了文章《Go 1.21新特性前瞻[3]》&#xff0c;对Go 1.21可能引入的新特性、新优化和新标准库包做了粗略梳理。 在6月初举办的GopherChina 2023大会上[4]&…

webshell的过滤绕过

目录 一、webshell的过滤绕过 1.异或操作绕过 2.取反操作绕过 3.PHP语法绕过 一、webshell的过滤绕过 1.异或操作绕过 下面一段代码 <?phpecho "A"^""; //结果为"!" ?> 之所输出的结果会是"!",是因为代码中对字符&qu…

文心一言 VS 讯飞星火 VS chatgpt (79)-- 算法导论7.4 4题

四、请用go语言&#xff0c;证明:RANDOMIZED-QUICKSORT 期望运行时间是 Ω(nlgn)。 文心一言&#xff1a; 首先&#xff0c;为了证明RANDOMIZED-QUICKSORT的期望运行时间是Ω(nlg n)&#xff0c;我们需要证明在最坏的情况下&#xff0c;该算法的运行时间是O(nlg n)。然后&…