$router和$route的区别

Vue路由参数

最新推荐文章于 2025-07-28 08:37:11 发布

转载最新推荐文章于 2025-07-28 08:37:11 发布 · 5.1k 阅读

本文介绍了Vue 2.0中页面参数的获取方式，包括通过this.$route.query和this.$route.params接收参数的方法。此外还讲解了如何使用this.$router.push进行路由跳转及返回上一历史记录的方法。

在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。

在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转，所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名')，

在写的时候发现这两个为什么不同，在控制台打出this的时候，发现$route和$router同时存在

$route为当前router跳转对象里面可以获取name、path、query、params等

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

返回上一个history也是使用$router.go方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_39764635

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

$route 和 $router 的区别是什么?

祈澈菇凉

02-06

613

route：是当前路由的信息对象，提供了与当前路由相关的状态和参数，主要用于获取信息。$router：是 Vue Router 实例，提供了操作路由的各种方法，主要用于导航和路由控制。理解这两者的区别有助于开发者在使用 Vue Router 时选择正确的方法和属性，从而更加高效地处理路由相关的逻辑。

$route和$router的区别详解

xunfengZ的博客

11-13

1万+

总的来说， $ router是用来操作路由的，$ route是用来获取路由信息的。 1.$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）常用的跳转连接的方法： //常规方法 this.$router.push("/login"); //使用对象的形式不带参数 this.$router.push({ path:"/login" }); //使用对象的形式，参数为地址栏上的参数 this.$router.push({ p

参与评论您还未登录，请先登录后发表或查看评论

vue中$router和$route的基本使用

Evan's Blog ٩(๑❛ᴗ❛๑)۶

11-26

1万+

发现在自己在前端的道路上要一去不复返了，好了废话少说，开始记录。如果大家有什么问题，欢迎给我留言，一起交流探讨。: ) 一、路由基本概念 1.route，表示一条路由信息。 { path: '/home', component: Home } 2.routes，表示一组路由信息。 const routes = [ { path: '/home', component: H...

前端Vue篇之如何获取页面的hash变化、`$route` 和`$router` 的区别、params和query的区别

星辰迷上大海的博客

03-06

2627

获取页面的hash变化：通过监听 hashchange 事件，可以实时获取页面哈希的变化。使用 window.location.hash 可以读取当前哈希值。

前端路由傻傻分不清？route和router的区别，看完这篇别再搞混了！

热门推荐

zzz_zed的博客

12-24

4万+

vue2.0 $router和$route的区别

2019.2月份学习总结

weixin_43427474的博客

03-02

871

2019.2月份学习总结又涨一岁二月份收获读书英语微信公众号与闲鱼认知BIM学习展望三月又涨一岁 2月5号迎来了传统节日中最重要的一个节日——春节，也意味着我27（虚）岁了，新的一年我也给自己定下了目标，会更加努力，使自己变得更好，使身边的人和事物变得更美丽！二月份收获整个二月份收获还是不少的，无论是认知、技能等方面，都有了一些进步。读书按照与女朋友的约定（每个月至少读一本书），这个月读...

vue router总结 $router和$route及router与 router与route区别

10-16

本文将深入探讨 `$router` 和 `$route` 之间的差异，以及路由跳转的不同方式，同时还会讲解 `path: 'name'` 和 `path: '/name'` 的区别，以及 `router` 和 `route` 在 Vue Router 中的角色。 1. **$router 和 $...

vue $router和$route的区别详解

01-22

一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history...打印this.$route和this.$router。路由传参的方式 1.可以手写完整的path： this.$router.push({path:`/user/$

2019年2月26日心得体会

MatrixTao

02-26

368

vector.swap清空vector内存 std::vector<string>().swap(sumHour); 创建目录生成文件 if(0 != access(outputFp.c_str(), 0)) { mkdir(outputFp.c_str()); } outputFp = "I:\\gim\\" + to...

2019年2月工作总结

weixin_43852674的博客

02-16

985

总结下这一个月以来的代码小trick呀～ 1.7 精确度将xml转换成json： xmltodict.parse() xml = open(xml_path,‘r’) xml = xml.read() json = xmltodict.parse(xml) 读取文件夹下所有文件 os.walk() append,extend, - list之间可以直接+，效果等于extend a = [1,...

$route和$router的区别

qq_45838276的博客

09-19

7170

2、$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）3、$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。1、$router是用来操作路由，$route是用来获取路由信息。

Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图

m0_74343097的博客

01-12

3404

Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图

$route 和 $router详解和区别

wasd2399的博客

08-12

1456

$route 是只读的，$router 来编程的

vue-router

青蛙king的博客

08-08

1万+

一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？第一步，将组件 (components) 映射到路由。第二步，告诉 Vue Router 在哪里渲染它们。二、动态路由匹配三、嵌套路由四、编程式的导航五、命名路由六、命名视图七、重定向和别名八、路由组件传参九、HTML5 History 模式 ...

$route 和 $router详解、区别、示例代码

精通搬砖，资深技术砖家，在软件开发，人工智能，设备开发等领域都有研究。商业合作&交流学习可私信联系。

07-13

348

router 则是一个完整的 Vue Router 实例，它提供了与导航和路由相关的所有功能。在 Vue.js 中，$route 和 $router 是与路由相关的两个重要概念，它们主要在使用 Vue Router 时发挥作用。$route 是一个只读的属性，用于访问当前激活的路由的状态。通过上述解释和示例代码，你应该能更清楚地理解 $route 和 $router 在 Vue.js 应用中的作用和区别。// 输出当前路由的路径。$router 是一个完整的路由管理器，提供了路由导航和监听的功能。

$router和$route区别

03-17

好的，我现在需要详细分析用户关于Vue.js中$router和$route区别的问题。首先，我应该回顾自己已有的知识，并参考提供的资料来确保准确性。用户的问题很明确：想知道$router和$route的区别及用法。根据提供的引用...