Блог

Как я могу получить доступ к текущему имени маршрута реактивно с помощью маршрутизатора Vue, используя Vue Composition API в Vue 3 с помощью TypeScript?

Вот примеры использования Vue 3.0 и маршрутизатора Vue v4.0.0-beta.12 с синтаксисом Composition 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
    //}, { immediate: true });
    });
    
    return { route };
  },
});
</script>

<template>
  <p>Current route name: {{ route.name }}</p>
</template>
  

Или с использованием текущего экспериментального синтаксиса настройки скрипта, SFC Composition API Syntax Sugar, для Composition API:

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

export const name = 'MyCoolComponent';

export 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
//export 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
//}, { immediate: true });
});
</script>

<template>
  <p>Current route name: {{ route.name }}</p>
</template>
  

Вот мой пример, который предназначен для просмотра параметров маршрута вместо этого. Этот вопрос возникает при обычном поиске того, как просматривать параметры маршрута в Vue 3.

 <script setup lang="ts">
import axios from 'axios'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const page = ref<any>({})

const fetchPage = async () => {
    console.log('route', route.params)
    const { data } = await axios.get(
        `/api/${route.params.locale}/pages/${route.params.slug}`,
        {
            params: {
                include: 'sections,documents,courses',
            },
        }
    )

    page.value = data.data
}

onMounted(() => {
    fetchPage()
})

watch(() => route.params.slug, fetchPage)
</script>
  

В моем примере route.name не меняется, но route.params.slug изменяется.

Вместо этого вы можете использовать этот метод:

     watch(
    route.params,
    () => {
      console.log(route.params.name);
    },
    {deep: true, immediate: true,}
    )