this.$route是干什么的
时间: 2023-09-04 20:14:38 浏览: 42
this.$route是Vue.js框架中的一个属性,它提供了当前路由的相关信息。通过访问this.$route,你可以获取当前路由的路径、参数、查询参数等信息。这个属性常用于控制视图的展示和导航逻辑。例如,你可以通过this.$route.path获取当前路由的路径,通过this.$route.params获取当前路由的参数。通过使用this.$route,你可以在Vue组件中根据当前路由的不同来实现不同的逻辑和展示效果。
相关问题
this.$router和this.$route区别
`this.$router` 和 `this.$route` 是 Vue.js 中的两个重要属性,它们在路由管理中扮演着不同的角色。
1. `this.$router`:这是一个实例属性,代表当前组件所在的路由实例。你可以使用它来执行路由操作,比如导航(`this.$router.push` 或 `this.$router.go`)、获取当前路由详情 (`this.$router.currentRoute`)、监听路由变化 (`this.$router.beforeEach` 或 `this.$router.afterEach`)等。它是 Router 实例的引用,提供了对整个路由系统进行操作的方法。
2. `this.$route`:这是当前组件内部访问的局部变量,它表示当前激活的路由配置。它通常包含了当前路由的详细信息,如路径、名称、参数、哈希(如果在 URL 中有 #)、meta 等。你可以直接读取和修改这个对象来获取或更新路由状态。
简单来说,`this.$router` 更侧重于全局路由管理和操作,而 `this.$route` 则用于获取和处理当前页面具体的路由数据。
this.$route
this.$route是Vue Router提供的一个对象,用于获取当前路由的相关信息。在组件内,可以通过this.$route来访问当前路由的信息。例如,this.$route.query可以获取到当前路由的查询参数,this.$route.params可以获取到当前路由的动态参数,this.$route.path可以获取到当前路由的路径,this.$route.matched可以获取到当前路由匹配的路由记录。在导航守卫函数中,可以通过参数to和from来获取前后的路由信息对象。此外,在watch选项中,可以使用$route来监听当前路由的变化,参数to和from同样表示路由信息对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [this.$router和this.$route区别 && 路由传参的2种方式 && this.$route的各种语法](https://blog.csdn.net/monika_beiluqi/article/details/115446349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [this.$router的方法总结](https://blog.csdn.net/Hassanh/article/details/127611258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)