vue中的如何在单独的j s文件中获取

445 阅读1分钟

在Vue 3中,你可以使用Vue Router的useRouter函数来在独立的JS文件中获取当前的路由实例。首先,确保你已经安装并设置了Vue Router。

  1. vue-router导入useRouter
  2. 在你的函数或组件中调用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文件中获取并使用路由信息了。