Vue3 gets the current routing address

Correct answer

Using useRouter :

 // router path: "/user/:uid"
<template>
  <div>user</div>
  <p>uid: {{ uid }}</p>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
 
export default defineComponent({
  name: "User",
  setup() {
    const router = useRouter();
    const uid = router.currentRoute.value.params.uid;
    return {
      // Returned data uid,
    };
  },
});
</script>

Explain

useRouter() returns object , similar to this.$router in vue2

router.currentRoute is the RefImpl object, which is the object we return using ref . The current route can be accessed through .value , similar to this.$route in Vue.

Use console.log to print it out and see:

This concludes this article about how to get the current routing address in vue3. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.