vue3 在js文件获取当前路由

在 Vue 3 中，你可以使用 vue-router 提供的生命周期钩子和组件属性来获取当前路由信息。首先确保已经在项目中安装了 vue-router 并导入它。

通过useRoute全局插槽: 如果你使用的是 Vue Router 的 useRoute 插槽函数，可以在任何组件内获取路由实例：

import { useRoute } from 'vue-router';

export default {
setup() {
const route = useRoute();
// 现在你可以访问 route 对象，例如：
console.log('当前路径:', route.path);
return {};
}
}
登录后复制

通过this.$router属性 (推荐): 在组件内部，可以直接通过 this 关键字访问 $router 变量：

export default {
mounted() {
console.log('当前路径:', this.$router.currentRoute.path);
},
}
登录后复制

**在全局混入对象: 如果你想在整个应用中复用这个功能，可以创建一个全局混入对象并注入$route`变量:

// router.js 或者 main.js
import { useRouter } from 'vue-router';
const routerPlugin = {
install(Vue) {
Vue.mixin({
computed: {
currentRoute() {
return this.$router.currentRoute;
},
},
});
},
};
Vue.use(routerPlugin);
登录后复制
然后在组件中就可以直接使用currentRoute了。