Блог

Главная - Вопросы по программированию - Как получить параметры маршрутизатора в vue 3?

Как получить параметры маршрутизатора в vue 3?

#typescript #vue.js #vuejs3

#typescript #vue.js #vuejs3

Вопрос:

Я создал проект в Vue.js 3 и машинописный текст.

router.js

 {
    path: "/app/:id",
    name: "Detail",
    component: Detail,
    props: true
  },

App.js

 <script lang="ts">

...

onMounted(() => {
      const id = $route.params.id;
      ...
    });

Но это приводит к ошибке:

 "Cannot find name '$route'."

Что я делаю не так?

Комментарии:

1. используйте this.$route

Ответ №1:

Vue Router 4.x обеспечивает useRoute() это:

 import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    onMounted(() => {
      const id = route.params.id
    })
  }
}

ДЕМОНСТРАЦИЯ

Ответ №2:

Если мы используем новейший способ SFC-настройки скрипта Vue 3, то

 <script setup>
import { useRoute } from 'vue-router';

const route = useRoute();  
const id = route.params.id; // read parameter id (it is reactive) 

</script>