Vue获取当前路由路径详解

1. 概述

Vue是一种基于组件化开发的前端框架，通过路由模式实现多页面之间的跳转和组件切换。在Vue中，我们经常需要获取当前的路由路径来进行一些逻辑判断或者动态展示。本篇文章将详细介绍在Vue中如何获取当前的路由路径。

2. Vue路由

在Vue中，使用vue-router实现路由功能。vue-router是Vue官方提供的路由管理工具，它可以帮助我们快速构建单页面应用。首先，我们需要安装vue-router：

npm install vue-router

安装完成后，我们可以在项目中引入vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

然后，我们可以定义路由规则，每个路由都映射到一个组件：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = new VueRouter({
  routes
})

最后，将路由实例注入到Vue实例中：

new Vue({
  router
}).$mount('#app')

3. 获取当前路由路径的方法

3.1 使用$route对象

在Vue中，我们可以使用$route对象来获取当前的路由路径。$route是Vue-router实例的一个属性，它包含了当前路由的各种信息，包括路径、参数、查询等等。我们可以通过$route.path来获取当前的路由路径。

mounted() {
  console.log(this.$route.path)
}

3.2 使用$route对象监听路由变化

除了直接获取当前的路由路径外，我们还可以通过监听$route对象的变化来获取最新的路由路径。Vue提供了$route对象的beforeEach和afterEach方法，我们可以在这两个方法中获取到当前的路由路径。

beforeEach((to, from, next) => {
  console.log(to.path)
  next()
})

afterEach((to, from) => {
  console.log(from.path)
})

3.3 使用this.$router对象

除了使用$route对象，我们还可以使用this.$router对象来获取当前的路由路径。$router是Vue-router实例的另一个属性，它可以帮助我们进行路由的跳转和导航。

mounted() {
  console.log(this.$router.currentRoute.path)
}

3.4 使用 $route和$ router对象之间的差异

虽然$route和$router都可以用来获取当前的路由路径，但两者存在一定的差异。$route是一个只读属性，我们不能对它进行修改；而$router是一个可读可写的属性，我们可以通过它来进行路由的跳转和导航。

4. 获取动态路由参数

在实际开发中，我们经常需要获取动态路由的参数。在Vue中，我们可以使用$route.params来获取动态路由参数。

mounted() {
  console.log(this.$route.params.id)
}

例如，我们定义了一个动态路由/user/:id，那么在访问/user/1时，this.$route.params.id的值将为1。

5. 获取查询参数

有时候，我们还需要获取URL中的查询参数。在Vue中，我们可以使用$route.query来获取查询参数。

mounted() {
  console.log(this.$route.query.id)
}

例如，当访问/user?id=1时，this.$route.query.id的值将为1。

6. 示例代码运行结果

下面是一个完整的示例代码，可以直接在Vue项目中运行：

<template>
  <div>
    <h1>当前路由路径：{{currentRoute}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRoute: ''
    }
  },
  mounted() {
    // 使用 $route对象获取当前路由路径 console.log(this.$ route.path)

    // 监听 $route对象的变化 this.$ route.beforeEach((to, from, next) => {
      console.log(to.path)
      next()
    })

    this. $route.afterEach((to, from) => { console.log(from.path) }) // 使用$ this. $router对象获取当前路由路径 console.log(this.$ router.currentRoute.path)

    // 获取动态路由参数
    console.log(this. $route.params.id) // 获取查询参数 console.log(this.$ route.query.id)
    this.currentRoute = this.$route.path
  }
}
</script>

通过上述代码，我们可以在mounted函数中获取到当前路由路径，并将其赋值给currentRoute变量。然后，我们在模板中展示currentRoute变量的值。运行结果如下：