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

Я создал проект на Vue.js 3 и TypeScript.

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'."

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

используйте этот. $ маршрут

— 14.12.2020 07:14

typescript vue.js vuejs3

14.12.2020 07:13

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Как заставить Remix работать с Mantine и Cloudflare Pages/Workers

Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

TypeScript против JavaScript

TypeScript vs JavaScript - в чем различия и какой из них выбрать?

Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage

Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...

Что такое ленивая загрузка в Angular и как ее применять

Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...

57 443

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Vue Router 4.x предоставляет для этого useRoute():

import { useRoute } from 'vue-router'

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

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

демо

~"Свойство params не существует для типа Router.ts(2339)"~ -> Обновление: неважно, используйтеRoute без r в конце... facepalm

— 11.05.2023 17:53

14.12.2020 07:26

Если мы используем новейший способ 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>

05.04.2021 14:42

вы также можете использовать составной API, чтобы написать свою собственную композицию, которая предлагает более приятный синтаксис и изящно обрабатывает, когда параметр является массивом.

const id = useRouteParam('id')

состав

import { computed, Ref } from 'vue'
import { useRoute } from 'vue-router'

export function useRouteParam(param: string, useFirstIfArray?: true): Ref<string>
export function useRouteParam(param: string, useFirstIfArray: false): Ref<string | string[]>
export function useRouteParam(param: string, useFirstIfArray = true): Ref<string | string[]> {
  const route = useRoute()

  return computed(() => {
    let paramValue = route.params[param]

    if (useFirstIfArray && Array.isArray(paramValue) && paramValue.length) {
      [paramValue] = paramValue
    }

    return paramValue
  })
}

https://github.com/PrefectHQ/vue-compositions/tree/main/src/useRouteParam

11.03.2023 23:26