下面是详细讲解“vue $router和$route的区别详解”的完整攻略:
下面是详细讲解“vue $router和$route的区别详解”的完整攻略:
背景
Vue.js 是一个轻量级的 MVVM 前端框架,常用的路由管理器是 vue-router。在使用 vue-router 过程中,可能会涉及到两个关键对象:$router 和 $route。这两个对象貌似很相似,但实际上有着明确的区别。本文将详细讲解两者的区别和应用场景。
$router
在 Vue.js 组件中,可以通过这个对象访问到 VueRouter 实例(路由管理器),从而可以方便地执行一些基于路由跳转的方法,如push, replace, go等,使用 $router 对象的优点:
- $router 可以很方便地执行路由跳转的方法。
- $router 对象仅用于在组件代码中调用路由方法,因此较为轻量。
示例:跳转到命名路径为/home的页面
// 通过 this.$router 访问路由(VueRouter实例)
this.$router.push({ name: 'home' });
$route
$route 是当前路由的信息对象,包含当前路由的路径、参数、查询参数等,使用 $route 对象的优点:
- $route 是只读的,不支持修改。
- $route 可以在 computed 中进行响应式更新,方便的获得当前路由变化后的信息。
示例:获取当前路径参数
// 通过 this.$route 访问当前路由信息
console.log(this.$route.params.id);
总结
$router 是 vue-router 的实例对象,提供了一些基于路由跳转的方法,如push, replace, go等。常用于在组件代码中执行路由跳转的方法。
$route 是当前路由的信息对象,包含当前路由的路径、参数、查询参数等。$route 是只读的,不支持修改,可以在 computed 中进行响应式更新,方便的获得当前路由变化后的信息。
除了上述区别,$router 和 $route 还有很多的实际应用场景,比如:
- 在全局导航守卫中使用 $router 拦截路由跳转。
- 在页面的 computed 中使用 $route 监听路由变化。
- 在组件内部使用 $router 跳转路由,同时又使用 $route 获得当前路由信息。
这里只是简单举了几个例子,还有很多其它的应用场景,需要在实际业务场景中灵活运用。
本文标题为:vue $router和$route的区别详解


- 用js删除tbody的代码 2023-12-01
- 什么是cookie?js手动创建和存储cookie 2024-02-13
- React基础-JSX的本质-虚拟DOM的创建过程实例分析 2023-07-09
- asp.net+ajax简单分页实例分析 2022-10-18
- vue实现一个获取按键展示快捷键效果的Input组件 2024-02-25
- 浅谈css中浮动和清除浮动带来的影响 2024-01-03
- 实例讲解DataTables固定表格宽度(设置横向滚动条) 2024-02-20
- CSS——float属性及Clear:both备忘笔记 2023-12-14
- Ajax实现城市二级联动(三) 2023-01-31
- JS中LocalStorage与SessionStorage五种循序渐进的使用方法 2024-03-01