Как получить текущий маршрут в Vue 3 вне компонента?
Когда я нахожусь вне компонента Vue, то есть в магазине, router.currentRoute.name не определен:
import router from '@/router'
console.info(router.currentRoute.name) // returns "undefined"
Я тоже не могу использовать useRouter Composable, потому что он не работает вне компонентов:
import { useRouter } from 'vue-router'
const router = useRouter()
console.info(router) // returns "undefined"
Это никогда не было проблемой во Vue 2, где маршрутизатор был создан с помощью new Router().
В Vue 3 при использовании маршрутизатора с новым createRouter() экспортированный маршрутизатор, похоже, не отображает router.currentRoute.
Ответы 3
В Vue 3 вместо
router.currentRoute.name
Доступ к имени маршрута должен быть получен с помощью:
router.currentRoute.value.name
Пробовали использовать createRouter?
import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [
// your routes
];
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
console.info(router);
console.info(router.currentRoute.value.path);
export default router;
Я использую эту последовательность в модуле router.js, который экспортирует маршрутизатор. Затем этот маршрутизатор импортируется в main.js и вводится в приложение (myApp.use(router)). Его также можно импортировать в другие модули и использовать там. Например, я использую его для юнит-тестов.
Возможно, текущий маршрут просто еще не инициализирован?
Например, в корневом компоненте приложения:
import { useRoute } from 'vue-router'
import { watch } from 'vue'
const route = useRoute()
console.info(route.name) // -> undefined
watch(route, () => {
console.info(route.name) // -> route.name is defined
})
В представлении, загруженном <router-view />:
import { useRoute } from 'vue-router'
const route = useRoute()
console.info(route.name) // -> route.name is defined
Обратите внимание, что для доступа к текущему маршруту вам следует использовать useRoute, а не useRouter (см. документацию Vue Router).