vue2怎么获取当前页面的路由？

可以通过 vue-router 提供的 $route 对象来获取当前页面的路由信息。以下是几种常见的方法来获取和使用当前路由信息：

1. 在组件中直接访问 $route

在任何 Vue 组件中，你可以通过 this.$route 访问当前的路由对象。$route 对象包含了当前路由的各种属性，如路径、参数、查询参数等。

示例：

export default {
    name: 'MyComponent',
    mounted() {
        console.log('Current path:', this.$route.path);
        console.log('Current params:', this.$route.params);
        console.log('Current query:', this.$route.query);
    }
}

Copy
JavaScript

2. 使用 watch 监听路由变化

如果你需要在路由变化时执行某些操作，可以使用 watch 来监听 $route 的变化。

示例：

export default {
    name: 'MyComponent',
    watch: {
        '$route'(to, from) {
            console.log('Route changed from', from.path, 'to', to.path);
            // 执行其他逻辑
        }
    }
}

Copy
JavaScript

3. 在 Vuex 中获取当前路由

如果你需要在 Vuex store 中获取当前路由信息，可以通过 mapState 或直接访问 this.$route。

示例：

// 在 Vuex store 中
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'; // 假设你有一个单独的 router 文件

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        currentPath: ''
    },
    mutations: {
        setCurrentPath(state, path) {
            state.currentPath = path;
        }
    },
    actions: {
        updateCurrentPath({ commit }) {
            commit('setCurrentPath', this.$route.path);
        }
    }
});

// 在组件中
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['currentPath'])
    },
    created() {
        this.$store.dispatch('updateCurrentPath');
    }
}

Copy
JavaScript

4. 使用 beforeEach 路由守卫

如果你想在每次路由变化时全局处理一些逻辑，可以使用 router.beforeEach 路由守卫。

示例：

import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';

Vue.use(Router);

const router = new Router({
    routes
});

router.beforeEach((to, from, next) => {
    console.log('Navigating from', from.path, 'to', to.path);
    // 执行其他逻辑
    next();
});

export default router;

Copy
JavaScript

5. 在模板中使用 $route

你也可以在模板中直接使用 $route 对象的属性。

示例：

<template>
    <div>
        <p>Current Path: {{ $route.path }}</p>
        <p>Query Parameters: {{ $route.query }}</p>
    </div>
</template>

<script>
export default {
    name: 'MyComponent'
}
</script>

Copy
HTML

6. 使用 router.currentRoute

在 Vue 2 中，router.currentRoute 是一个只读的响应式属性，它总是返回当前的路由对象。你可以用它来获取当前路由信息。

示例：

export default {
    name: 'MyComponent',
    mounted() {
        console.log('Current route:', this.$router.currentRoute);
    }
}

Copy
JavaScript

标签：
来源：