How to access current route name reactively in Vue Composition API in TypeScript?(如何在TypeScrip的Vue合成API中动态访问当前的路由名称？)

本文介绍了如何在TypeScrip的Vue合成API中动态访问当前的路由名称？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用Vue 3中的Vue组合API使用Vue路由器，对当前路由名称进行被动访问？

推荐答案

以下是使用Vue 3.0和Vue路由器v4.0.0-Beta.12与复合API语法的示例：

<script lang="ts">
import { defineComponent, computed, watch } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'MyCoolComponent',
  setup() {
    const route = useRoute();
    
    console.debug(`current route name on component setup init: ${route.name}`);

    // You could use computed property which re-evaluates on route name updates
    // const routeName = computed(() => route.name);

    // You can watch the property for triggering some other action on change
    watch(() => route.name, () => {
      console.debug(`MyCoolComponent - watch route.name changed to ${route.name}`);
      // Do something here...

    // Optionally you can set immediate: true config for the watcher to run on init
    /