当前位置:首页 > 技术文章 > 正文内容

$router 和 $route的区别(route和path的区别)

zonemu1周前 (07-26)技术文章5

一句话总结

$ router是用来操作路由的,路由操作对象 ,只写对象

$ route是用来获取路由信息的,路由信息对象,只读对象。

$router

$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象(例如history)

常用的跳转连接的方法:

this.$router.push("/login");

//使用对象的形式 不带参数

this.$router.push({ path:"/login" });

//使用对象的形式,参数为地址栏上的参数

this.$router.push({ path:"/login",query:{username:"hh"} });

使用对象的形式 ,参数为params 不会显示在地址栏

this.$router.push({ name:'aaa' , params: {id:111} });

$ route

$ route是一个跳转的路由对象(路由信息对象),每一个路由都会有一个$route对象,是一个局部的对象。

主要的属性有:

$route.path 字符串,等于当前路由对象的路径,会被解析为绝对路径,如/home/ews

$route.params 对象,包含路由中的动态片段和全匹配片段的键值对,不会拼接到路由的url后面

$route.query 对象,包含路由中查询参数的键值对。会拼接到路由url后面

$route.router 路由规则所属的路由器

$route.name 当前路由的名字,如果没有使用具体路径,则名字为空

相关文章

智能停车场管理系统五种收费类型设置

智能停车场管理系统五种收费类型设置  点击智能停车场管理系统收费标准设置图标,出现下图所示对话框,在这个界面里面可以对停车场系统需要使用的收费标准进行个性化设置:共有五种收费类型(标准收费类、通用标准...

2024前端面试真题之—VUE篇(前端面试题vuex)

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、com...

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...

K8s 的 Namespace 到底解决了什么问题?

在 Kubernetes 的世界里,资源调度、服务编排以及自动化运维构成了它强大的基础架构能力。但随着集群规模的扩大和团队协作复杂度的提升,仅靠原始的资源管理手段已经难以支撑多租户或大型项目的管理需求...

我的VIM配置(如何配置vim编辑环境)

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置...

02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html1.结构元素 可以理解为语义话标记,比如:以前这么写<...