[Vuejs]-How do I access the router in a Vue 3 Functional component?

by

0👍

Similar to Mehdi’s answer but instead of inject("$router") I used the actual router instance.

Mehdi’s answer is fails type checks.

import { FunctionalComponent } from "vue";
import { router } from "./router";
import { useUserProfileStore } from "./stores/UserProfile";

const Prefill: FunctionalComponent = () => {
  const userProfileStore = useUserProfileStore();
  userProfileStore.randomData();
  router.replace("/");
};
Prefill.props = [];
Prefill.emits = [];
export default Prefill;

With this approach I can add to the router configuration

{
  path: "/prefill",
  name: "Prefill",
  component: Prefill,
}

0👍

Functional components are stateless and the don’t do any side effects, but they can emit events fired by interacting with component element :

import { FunctionalComponent } from "vue";

const Prefill: FunctionalComponent<{}> = (props, { slots, emit, attrs }) => {
 
//somewhere in the render function/jsx do
  emit('goto','/')
 
};
Prefill.props = [];
Prefill.emits = ["goto"];
export default Prefill;

in parent component :

<Prefill @goto="(path)=>$router.push(path)" .../>

Leave a comment