Vue Composition API: Routing

Class Component

    redirect(): void {
        const path = this.$route.query.redirect
            ? this.$route.query.redirect.toString()
            : "/";
        this.$router.push({ path });
    }

Composition API

import { useRoute, useRouter } from "vue-composition-wrapper";

const route = useRoute();
const router = useRouter();

function redirect(): void {
    const path = route.query.redirect
        ? route.query.redirect.toString()
        : "/";
    router.push({ path });
}

Notes

• After migrating to Vue 3 and Vue Router 4, the "vue-composition-wrapper" package can be removed and useRoute and useRouter can be imported from "vue-router".

  import { useRoute, useRouter } from "vue-router";

  const route = useRoute();
  const router = useRouter();

Documentation

• Vue Router and the Composition API