在 Vue.js 中，你可以使用 `this.$router` 和 `this.$route` 来获取当前的路由信息。
1. `this.$router`：这是一个 Vue Router 实例，它包含了所有路由的配置，以及用于导航的方法。2. `this.$route`：这是一个对象，包含了当前路由的所有信息，比如路径、参数、查询等。
如果你想获取当前路由的路径，你可以使用 `this.$route.path`。如果你想获取当前路由的名称，你可以使用 `this.$route.name`。如果你想获取当前路由的参数，你可以使用 `this.$route.params`。如果你想获取当前路由的查询字符串，你可以使用 `this.$route.query`。
例如，如果你想在一个组件中获取当前路由的路径，你可以这样做：
```javascriptexport default { name: 'MyComponent', mounted { console.log; }}```
这样，当组件被挂载时，它会在控制台输出当前路由的路径。
Vue获取当前路由详解
在Vue.js开发中，路由管理是单页面应用（SPA）中不可或缺的一部分。Vue Router作为Vue.js的官方路由管理器，允许开发者轻松地实现页面间的导航和参数传递。本文将详细介绍如何在Vue中获取当前路由信息，包括路径、参数、查询字符串等。
一、理解Vue Router中的Route对象
在Vue Router中，每个路由都是一个对象，包含路径、组件、参数等信息。`route`对象是响应式的，它会随着路由的变化而更新。要获取当前路由信息，首先需要了解`route`对象的结构。
```javascript
const route = {
path: '/path/to/your/route',
name: 'routeName',
params: { userId: '123' },
query: { type: 'admin' },
meta: { requiresAuth: true }
在上面的示例中，`path`表示路由的路径，`name`表示路由的名称，`params`和`query`分别表示路由的参数和查询字符串，`meta`表示路由的元信息。
二、使用Vue Router的实例获取当前路由
2.1 `this.$route`
在Vue组件中，可以通过`this.$route`来访问当前路由信息。这是一个响应式的对象，它会随着路由的变化而更新。
```javascript
export default {
name: 'MyComponent',
mounted() {
console.log(this.$route.path); // 输出当前路由的路径
console.log(this.$route.params); // 输出当前路由的参数
console.log(this.$route.query); // 输出当前路由的查询字符串
2.2 `this.$router`
`this.$router`是Vue Router的实例，它提供了路由导航的方法，如`push`、`replace`和`go`。虽然`this.$router`本身不直接提供获取当前路由信息的方法，但可以通过它来获取`$route`实例。
```javascript
export default {
name: 'MyComponent',
mounted() {
const currentRoute = this.$router.currentRoute;
console.log(currentRoute.path); // 输出当前路由的路径
console.log(currentRoute.params); // 输出当前路由的参数
console.log(currentRoute.query); // 输出当前路由的查询字符串
2.3 `router-view`
`router-view`组件用于渲染当前匹配的路由组件。虽然它本身不提供获取路由信息的方法，但可以通过它来间接获取当前路由信息。
```html
三、使用Vue Router的导航守卫获取当前路由
3.1 全局前置守卫
全局前置守卫在导航触发之前全局地调用，因此可以用来检查用户是否已登录、权限验证等。
```javascript
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)
