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

【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.lryc.cn/news/137965.html

相关文章:

  • 整理mongodb文档:聚合管道
  • Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果
  • Qt-事件循环与QtConcurrent、QThread结合使用时注意的点
  • 基于MongoDB的空间数据存储与查询
  • jquery中pdf的上传、下载及excel导出
  • 【MyBatis】:PageHelper分页插件与特殊字符处理
  • C语言练习1(巩固提升)
  • eCharts热力图Y轴左上角少一块
  • RabbitMQ介绍
  • 玩转软件|钉钉个人版内测启动:AI探索未来的工作方式
  • 【Linux】一张图了解系统文件
  • 自动化测试平台seldom-platform部署及使用
  • 2023年8月第3周大模型荟萃
  • win11 设置小任务栏
  • 在 React 中获取数据的6种方法
  • Docker基础入门:常规软件安装与镜像加载原理
  • redis初识
  • 死锁的典型情况、产生的必要条件和解决方案
  • 日志搞不定?手把手教你如何使用Log4j2
  • 基于Googlenet深度学习网络的交通工具种类识别matlab仿真
  • R语言04-R语言中的列表
  • [Linux]进程概念
  • GEE/PIE遥感大数据处理与应用
  • ● 647. 回文子串 ● 516.最长回文子序列
  • Mysql group by使用示例
  • 淘宝商品详情采集接口item_get-获得淘宝商品详情(可高并发线程)
  • uniapp写公众号h5开发 附件上传 下载功能
  • 机器学习基础09-审查分类算法(基于印第安糖尿病Pima Indians数据集)
  • C++ sort与优先队列排序的区别
  • 【Rust】Rust学习 第十九章高级特征