如何在组件外部获取Vue 3中的当前路由？

Question

当我在 Vue 组件之外时，即在商店中，

router.currentRoute.name

未定义：

import router from '@/router'
console.log(router.currentRoute.name) // returns "undefined"

我也无法使用

useRouter

可组合项，因为它无法在组件之外工作：

import { useRouter } from 'vue-router'
const router = useRouter()
console.log(router) // returns "undefined"

这在 Vue 2 中从来不是问题，其中路由器是使用

new Router()

创建的。
在 Vue 3 中，当将路由器与新的

createRouter()

一起使用时，导出的路由器似乎没有公开

router.currentRoute

。

Answer 1

在 Vue 3 中而不是

router.currentRoute.name

路线名称应通过以下方式访问：

router.currentRoute.value.name

Answer 2

您尝试过使用

createRouter

吗？

import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
// your routes
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

console.log(router);
console.log(router.currentRoute.value.path);

export default router;

我在导出路由器的模块

router.js

中使用此序列。然后将该路由器导入到

main.js

中并注入到应用程序中 (

myApp.use(router)

)。它也可以导入到其他模块中并在那里使用。例如，我用它来进行单元测试。