Vue.js中获取路由两种方法_就能拿到当前路径_比如你可以设置一个watch来记录路由变化前后的路径

Vue.js中获取路由地址内容的两种方法

一、使用this.$route对象

Vue Router会自动把当前活动的路由信息加入到Vue实例中，你可以直接用this.$route来获取这些信息，包括路径、参数、查询参数等。

比如，用this.$route.path就能拿到当前路径，用this.$route.query就能拿到查询参数。

二、使用watch监听器

有时候你想在路由地址变化时做一些操作，就可以通过watch来监听$route对象的变化。

比如，你可以设置一个watch来记录路由变化前后的路径。

实例展示

下面是一个如何使用this.$route对象的示例：

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

获取方式对比

三、watch监听器示例

以下是一个使用watch监听器来监听路由变化的示例：

 export default { watch: { '$route'(to, from) { console.log('From:', from.path); console.log('To:', to.path); } } } 

总的来说，Vue.js中获取路由地址的内容主要是通过this.$route对象和watch监听器。根据具体需求，你可以选择使用它们中的一个或两个。

• this.$route对象：适合直接获取当前路由信息。
• watch监听器：适合在路由变化时执行特定操作。

FAQs

1. Vue中获取当前路由地址内容的方法？

   通过Vue Router的$route对象可以获取当前路由地址内容。

2. 如何在Vue中获取路由参数内容？

   Vue Router的$route.params对象包含了当前路由参数的内容。

3. 如何在Vue中获取查询参数内容？

   使用$route.query对象可以获取查询参数内容。