vue2.0 $router和$route的区别

最新推荐文章于 2025-11-09 18:03:02 发布
原创 最新推荐文章于 2025-11-09 18:03:02 发布 · 置顶 · 4.4w 阅读 · 57 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端 #route #router #路由

本文详细介绍了Vue 2.0中如何使用this.$route和this.$router来处理页面间的参数传递与路由跳转。通过具体示例，解释了两者之间的区别及其应用场景。

在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方法

Vue篇(008)-vue2.0中的$router 和 $route的区别
手掌日月摘星辰
03-04 498
参考答案：$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数；而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等。 解析
68.vue2.0学习 —— vue-router
Kylincsg的博客
02-20 961
在组件中使用router-view和router-link。下一篇：上线部署(nginx)vue的一个插件库，专门用来实现SPA应用。下载vue-router插件。在项目中配置路由表和路由插件。
vue中$router和$route的基本使用
Evan's Blog ٩(๑❛ᴗ❛๑)۶
11-26 1万+
发现在自己在前端的道路上要一去不复返了，好了废话少说，开始记录。 如果大家有什么问题，欢迎给我留言，一起交流探讨。: ) 一、路由基本概念 1.route，表示一条路由信息。 { path: '/home', component: Home } 2.routes，表示一组路由信息。 const routes = [ { path: '/home', component: H...
$route和$router的区别
qq_45838276的博客
09-19 7197
2、$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）3、$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。1、$router是用来操作路由，$route是用来获取路由信息。
Vue路由传参
最新发布
qq_51626500的博客
11-09 1329
Vue路由传参
前端Vue篇之如何获取页面的hash变化、`$route` 和`$router` 的区别、params和query的区别
星辰迷上大海的博客
03-06 2739
获取页面的hash变化：通过监听 hashchange 事件，可以实时获取页面哈希的变化。使用 window.location.hash 可以读取当前哈希值。
2019.2月份学习总结
weixin_43427474的博客
03-02 882
2019.2月份学习总结又涨一岁二月份收获读书英语微信公众号与闲鱼认知BIM学习展望三月 又涨一岁 2月5号迎来了传统节日中最重要的一个节日——春节，也意味着我27（虚）岁了，新的一年我也给自己定下了目标，会更加努力，使自己变得更好，使身边的人和事物变得更美丽！ 二月份收获 整个二月份收获还是不少的，无论是认知、技能等方面，都有了一些进步。 读书 按照与女朋友的约定（每个月至少读一本书），这个月读...
2019年2月26日 心得体会
MatrixTao
02-26 379
vector.swap清空vector内存     std::vector<string>().swap(sumHour);   创建目录生成文件     if(0 != access(outputFp.c_str(), 0))     {         mkdir(outputFp.c_str());     }     outputFp = "I:\\gim\\" + to...
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
10-18
以上这些就是Vue2.0中使用.vue文件页面跳转时.$router.push方法的详细用法和相关知识点。希望这篇文章能够帮助到正在使用Vue框架进行前端开发的朋友们，帮助他们更加有效地管理和使用路由跳转功能。
vue项目使用$router.go(-1)返回时刷新原来的界面操作
11-20
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一...
$router和$route的区别
JJ_huahua的博客
01-21 1329
$router和$route的区别
vue router总结 $router和$route及router与 router与route区别
wgq2020的博客
10-26 674
Vue Router是Vue.js官方提供的路由管理器，它能够非常方便地实现多页面之间的跳转、参数传递、404页面处理等功能。在Vue Router中，是当前活跃路由对应的路由信息对象。它包含了当前路由的一些信息，例如：当前的路径、参数、查询参数等。route是Vue Router中非常重要的对象，掌握它们的用法可以更好地实现路由管理。route是两个非常重要的对象，下面我们来分别介绍它们的作用。router来定义路由规则、跳转路由、监听路由变化等操作。实例，可以通过它来访问路由对象和方法。
2019年2月工作总结
weixin_43852674的博客
02-16 1001
总结下这一个月以来的代码小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,...
Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图
m0_74343097的博客
01-12 3434
Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图
$route 和 $router详解和区别
wasd2399的博客
08-12 1547
$route 是只读的，$router 来编程的
vue-router
热门推荐
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
$route 和 $router详解、区别、示例代码
精通搬砖，资深技术砖家，在软件开发，人工智能，设备开发等领域都有研究。商业合作&交流学习可私信联系。
07-13 378
router 则是一个完整的 Vue Router 实例，它提供了与导航和路由相关的所有功能。在 Vue.js 中，$route 和 $router 是与路由相关的两个重要概念，它们主要在使用 Vue Router 时发挥作用。$route 是一个只读的属性，用于访问当前激活的路由的状态。通过上述解释和示例代码，你应该能更清楚地理解 $route 和 $router 在 Vue.js 应用中的作用和区别。// 输出当前路由的路径。$router 是一个完整的路由管理器，提供了路由导航和监听的功能。
$route 和$router 的区别
午夜后是黎明，风雨后是骄阳
12-17 1020
在 Vue.js 中， 和 是 Vue Router 提供的两个非常重要的对象，它们用于管理和操作路由。定义： 是一个响应式的对象，它包含了当前激活路由的所有信息，例如路径、参数、查询字符串等。你可以把它看作是“当前路由快照”。常见属性： 的用途 读取路由信息：你可以使用 来访问当前路由的各种信息，如路径 ()、参数 ()、查询字符串 () 等等。动态组件渲染：根据 中的数据（比如 或 ），可以实现动态加载不同的组件或内容。导航守卫：虽然 本身不直接用于导航控制，但它可
$route
bycfmz的博客
07-04 708
route。
使用Vue 2.0和Vue-router搭建单页应用教程
本文主要介绍了如何使用Vue 2.0和Vue-router构建一个简单的单页应用，包括Vue.js的基本介绍、环境搭建步骤以及开发过程。 Vue.js是一个非常流行的前端框架，它结合了Angular.js和React.js的优势，同时避免了它们的...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值