阿珊解说Vue中`$route`和`$router`的区别

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1. 🔧 `$route`
      • 2. 🔧 `$router`
      • 3. 🔧 `$route`和`$router`的区别
    • 🌟 总结
    • 参考资料:

摘要:

🤔 在Vue开发中,我们经常使用$route$router这两个概念,但你知道它们之间的区别吗?本文将详细解析$route$router的不同之处,帮助读者更好地理解和使用它们。👩‍💻

引言:

🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在Vue中,路由管理是实现单页面应用(SPA)的关键功能。在路由中,我们经常听到$route$router这两个概念,但你知道它们之间的区别吗?在这篇文章中,我将带你深入了解$route$router的不同之处。🚀

正文:

1. 🔧 $route

类型:$route是一个对象,它包含了当前路由的信息,如路径、查询参数、路由参数等。
应用场景:通常用于获取当前路由的信息,如在导航守卫中检查当前路由是否符合要求。

$route 是 Vue.js 中的一个对象,它用于管理当前路由的信息。它包含了当前路由的路径、查询参数、路由参数等信息。$route 对象可以在任何组件内访问,它是由 Vue Router 自动注入的。

以下是一些常用的 $route 属性和方法:

  1. $route.path:当前路由的路径。

  2. $route.params:当前路由的动态参数对象。

  3. $route.query:当前路由的查询参数对象。

  4. $route.name:当前路由的名称。

  5. $route.matched:当前路由匹配的路由记录数组。

  6. $route.isActive:当前路由是否处于激活状态。

  7. $route.isExactActive:当前路由是否处于精确激活状态。

  8. $route.replace:将当前路由替换为指定的路由。

以下是一个简单的示例:

<template><div><p>当前路由路径:{{ $route.path }}</p><p>当前路由参数:{{ $route.params }}</p><p>当前路由查询参数:{{ $route.query }}</p><p>当前路由名称:{{ $route.name }}</p><p>当前路由匹配的路由记录数组:{{ $route.matched }}</p><p>当前路由是否处于激活状态:{{ $route.isActive }}</p><p>当前路由是否处于精确激活状态:{{ $route.isExactActive }}</p><button @click="$route.replace('/about')">将当前路由替换为 /about</button></div>
</template><script>
export default {name: 'App',
};
</script>

在这个示例中,我们展示了如何使用 $route 对象的一些属性和方法。当点击按钮时,会将当前路由替换为 /about

2. 🔧 $router

类型:$router是一个实例,它包含了路由器的配置和操作方法,如添加路由、导航等。
应用场景:通常用于进行路由的跳转、添加导航守卫等操作。

$router 是 Vue.js 中的一个对象,它用于管理路由。它包含了路由的配置、导航、历史记录等功能。$router 对象可以在任何组件内访问,它是由 Vue Router 自动注入的。

以下是一些常用的 $router 属性和方法:

  1. $router.currentRoute:当前路由对象,包含了当前路由的路径、参数、查询等信息。

  2. $router.history:路由历史记录,是一个数组,包含了每次路由跳转的记录。

  3. $router.current:当前路由在路由历史记录中的索引。

  4. $router.replace:将当前路由替换为指定的路由。

  5. $router.push:跳转到指定的路由。

  6. $router.back:后退到上一个路由。

  7. $router.forward:前进到下一个路由。

以下是一个简单的示例:

<template><div><p>当前路由路径:{{ $router.currentRoute.path }}</p><p>当前路由参数:{{ $router.currentRoute.params }}</p><p>当前路由查询参数:{{ $router.currentRoute.query }}</p><button @click="$router.replace('/about')">将当前路由替换为 /about</button><button @click="$router.push('/contact')">跳转到 /contact</button><button @click="$router.back()">后退</button><button @click="$router.forward()">前进</button></div>
</template><script>
export default {name: 'App',
};
</script>

在这个示例中,我们展示了如何使用 $router 对象的一些属性和方法。当点击按钮时,会执行相应的路由操作。

3. 🔧 $route$router的区别

  • 概念:$route是路由信息对象,$router是路由器实例。
  • 使用场景:$route用于获取和检查路由信息,$router用于操作路由。
  • 功能:$route主要提供路由信息,$router提供路由器的配置和操作方法。

🌟 总结

在本篇文章中,我们详细解析了Vue中的$route$router的区别。通过对比分析,我们应该对这两个概念有了更深入的了解。在实际开发中,正确使用$route$router,将使我们的Vue应用更加高效和优质。🚀

参考资料:

  1. Vue.js官方文档:路由
  2. Vue Router官方文档

🌟 感谢您的阅读!如果您有任何疑问或建议,欢迎在评论区留言。💬

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

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

相关文章

Leetcode力扣刷题经验总结(数据结构、链表、顺序表)(例:删除有序数组中的重复项)

首先要明白leetcode的尿性....力扣题目的数据范围很抽象。然后记住三句话 第一一句话&#xff1a; 题目放在两个数组中分析&#xff08;利用数组元素拷贝的思想&#xff09;&#xff0c;再把一个数组看成两个数组取解题。 其次&#xff1a; 如&#xff1a;看好给你的数据范…

ResponseStatusException

目录 概述&#xff1a; 综合实例&#xff1a; 继承 ResponseStatusException-自定义异常类 继承 ResponseStatusException-自定义响应头信息 继承 ResponseStatusException-定制更多异常处理逻辑 继承 ResponseStatusException-根据异常发生的上下文动态改变 HTTP 状态码…

C++之类(一)

1&#xff0c;封装 1.1 封装的引用 封装是C面向对象三大特性之一 封装的意义&#xff1a; 将属性和行为作为一个整体&#xff0c;表现生活中的事物 将属性和行为加以权限控制 1.1.1 封装意义一&#xff1a; 在设计类的时候&#xff0c;属性和行为写在一起&#xff0c;表…

事务失效的八种情况!!!!

一、非publi修饰的方法。 /*** 私有方法上的注解&#xff0c;不生效&#xff08;因私有方法Spring扫描不到该方法&#xff0c;所以无法生成代理&#xff09;*/ Transactional private boolean test() {//test code }二、类内部访问。 类内部非直接访问带注解标记的方法 B&…

俄罗斯方块(ccf 201604-2)解题思路

问题描述   俄罗斯方块是俄罗斯人阿列克谢帕基特诺夫发明的一款休闲游戏。   游戏在一个15行10列的方格图上进行&#xff0c;方格图上的每一个格子可能已经放置了方块&#xff0c;或者没有放置方块。每一轮&#xff0c;都会有一个新的由4个小方块组成的板块从方格图的上方落…

类初步认识与对象

一&#xff0c;对于面向对象的认识 Java是一门面向对象的语言&#xff0c;一切都可以称为对象。将一个大象装进冰箱&#xff0c;甭管步骤多复杂&#xff0c;大象便是对象&#xff1b;将牛奶放进冰箱&#xff0c;牛奶便是对象&#xff1b;你我均是对像。 再比如洗一个衣服&…

如何在Linux中安装ARM交叉环境编译链

安装ARM交叉环境编译链过程如下&#xff1a; 首先创建一个文件夹如下&#xff1a; mkdir -p Linux_ALPHA/toolcahin然后将arm交叉编译工具链安装包拖到Linux中如下&#xff1a; 先输入mv 拖入的安装包即可 mv /var/run/vmblock-fuse/blockdir/pXeysK/gcc-4.6.4.tar.xz .直接…

进程:守护进程

一、守护进程的概念 守护进程是脱离于终端控制&#xff0c;且运行在后端的进程。&#xff08;孤儿进程&#xff09;守护进程不会将信息显示在任何终端上影响前端的操作&#xff0c;也不会被终端产生的任何信息打断&#xff0c;例如&#xff08;ctrlc&#xff09;.守护进程独立…

【数据结构】哈希

在一个数据序列中查找某一个数据元素&#xff0c;是数据管理时经常涉及的&#xff0c;通常以比较的方式来完成&#xff0c;典型的案例有无序序列的暴力查找&#xff08;O(N)&#xff09;、有序序列的二分查找&#xff08;O(logN)&#xff09;、平衡搜索树&#xff08;O(logN)&a…

ES6语法补充

使用bind()函数绑定this取值 在JavaScript中&#xff0c;函数里的this指向的是执行时的调用者&#xff0c;而非定义时所在的对象。 例如&#xff1a; const person {name: "yxc",talk: function() {console.log(this);} }person.talk();const talk person.talk; …

融合软硬件串流多媒体技术的远程控制方案

远程技术已经发展得有相当水平了&#xff0c;在远程办公&#xff0c;云游戏&#xff0c;云渲染等领域有相当多的应用场景&#xff0c;以向日葵&#xff0c;todesk rustdesk等优秀产品攻城略地&#xff0c;估值越来越高。占据了通用应用的方方面面。 但是细分市场&#xff0c;还…

试用Claude3

1 简介 好消息是&#xff0c;2024 年 3 月 4 日发布了 Claude3&#xff0c;据传比 GPT-4 更好&#xff0c;snooet 版本可以免费试用&#xff0c;坏消息是我们这儿不能用。 在官网注册时&#xff0c;需要选择国家并使用手机接收短信验证码。而在选项中没有中国这个选项。即使成…

IT外包怎样帮助企业控制成本?

在当今激烈的商业竞争中&#xff0c;企业不仅需要保持创新&#xff0c;还需要有效控制成本。IT外包作为一种管理模式&#xff0c;成为许多企业降低成本的得力工具。究竟IT外包如何帮助企业控制成本呢&#xff1f; 首先&#xff0c;IT外包在减少人力资源成本方面发挥了至关重要的…

【微服务生态】Nginx

文章目录 一、概述二、Nginx 的安装三、常用命令四、Nginx 配置4.1 反向代理配置&#xff08;1&#xff09;反向代理实例1&#xff08;2&#xff09;反向代理实例2 4.2 负载均衡配置4.3 动静分离4.4 集群配置 五、nginx 原理与优化参数配置 一、概述 本次为简易版&#xff0c;…

3.6 day1 FreeRTOS

1.总结keil5下载代码和编译代码需要注意的事项 注意要将魔术棒的的debug选项中的setting中的flashdownload中的reset and run 勾选上&#xff0c;同时将pack中的enable取消勾选 2.总结STM32Cubemx的使用方法和需要注意的事项 可以通过功能列表对引脚进行设置&#xff0c;并且可…

js获取年月、日期、年月日

获取年月日的快捷方法 new Date().toISOString().slice(0, 10)//2023-03-06 new Date().toISOString().slice(0, 7)//2023-03获取年月日 拼接法&#xff1a; let date new Date(); let year date.getFullYear(); let month date.getMonth() 1; let day date.getDate();…

TypeError: can‘t convert cuda:0 device type tensor to numpy

原因&#xff1a;错误通常发生在尝试在不同设备上的张量进行运算时。 解决方案&#xff1a;为了避免这个错误&#xff0c;我们应该在创建张量时指定设备&#xff0c;或者在运算前将张量转移到同一设备上。 定位到错误行&#xff0c;打印出现错误的变量信息&#xff0c;查看是…

C++标准数据类型

1.整形数据类型存储空间大小 分别定义int 、short类型的变量各一个&#xff0c;并依次输出它们的存在空间大小。单位&#xff1a;字节 输入 无 输出 一行&#xff0c;包含两个整数&#xff0c;分别是两个变量的存储空间大小&#xff0c;用一个空格隔开。 #include <iost…

【leetcode刷刷】122.买卖股票的最佳时机II 、55. 跳跃游戏 、45.跳跃游戏II

122.买卖股票的最佳时机II 这个贪心还比较好想 class Solution:def maxProfit(self, prices: List[int]) -> int:# 波谷和波峰的差。后一个减前一个&#xff0c;如果大于0&#xff0c;就加入利润max_profit 0for i in range(1, len(prices)):if prices[i] - prices[i-1] …

调用Mybatis plus中的saveBatch方法报找不到表的问题

1.问题现象 在用Mybatis plus开发的项目中&#xff0c;用自带的API批量保存的方法saveBatch操作时&#xff0c;发现报没有找到表的错误。 错误日志截图如下&#xff1a; 表实际是存在的&#xff0c;且发现其他的方法都没有问题&#xff0c;包括save、update等单个的方法&…