this.$route如何使用

在Vue.js中，$route是一个全局属性，用于访问当前路由信息。它可以用于获取当前路由的路径、参数、查询字符串等信息。

使用方法：

1. 在Vue组件中访问$route属性

export default {
  mounted() {
    console.log(this.$route.path); // 当前路由路径
    console.log(this.$route.params); // 当前路由参数
    console.log(this.$route.query); // 当前路由查询字符串
  }
}

2. 在Vue模板中访问$route属性

<template>
  <div>
    <p>当前路由路径：{{ $route.path }}</p>
    <p>当前路由参数：{{ $route.params }}</p>
    <p>当前路由查询字符串：{{ $route.query }}</p>
  </div>
</template>

相关问题

this.$route.params和this.$route.query

this.$route.params是Vue Router中用于接收通过路由中的参数传递的值的方式。通过this.$route.params可以获取到路由中通过params传递的参数值。

而this.$route.query则是用于接收通过路由中的查询参数传递的值的方式。通过this.$route.query可以获取到路由中通过query传递的参数值。

两者的区别在于，params传参需要在路由定义中指定name，并且通过name来引入路由，而query传参则直接通过键值对的方式在URL中进行传递。另外，params传参在切换路由时使用的是name来指定目标路由，而query传参则使用path来指定目标路由。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别](https://blog.csdn.net/weixin_44867717/article/details/109773945)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

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 ]