vue3获取当前路由

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

正解

使用 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 {

      // 返回的数据

      uid,

    };

  },

});

</script>

解释一下

useRouter() 返回的是 object , 类似于vue2的 this.$router

而 router.currentRoute 是 RefImpl 对象, 即我们使用 ref 返回的对象, 通过 .value 可以访问到当前的路由, 类似于vue的 this.$route

使用 console.log 打印出来看看: