在Vue 3中,你可以使用Vue Router的useRouter函数来在独立的JS文件中获取当前的路由实例。首先,确保你已经安装并设置了Vue Router。
- 从
vue-router导入useRouter。 - 在你的函数或组件中调用
useRouter来获取路由实例。
以下是一个简单的例子:
// router.js
import { useRouter } from 'vue-router';
export function useRouteInfo() {
const router = useRouter();
const currentRoute = router.currentRoute;
// 你可以在这里添加更多逻辑,比如监控路由变化等
return {
currentRoute
};
}
然后,在你的组件中使用这个函数:
// MyComponent.vue
<template>
<div>
<p>当前路由路径: {{ routeInfo.path }}</p>
</div>
</template>
<script>
import { useRouteInfo } from './router'; // 确保路径正确指向router.js文件
export default {
setup() {
const { currentRoute: routeInfo } = useRouteInfo();
return {
routeInfo
};
}
};
</script>
在这个例子中,useRouteInfo函数返回了当前路由的信息,然后在组件的setup函数中调用它,并将结果绑定到模板。这样你就可以在独立的JS文件中获取并使用路由信息了。