Как подружить vue 3 options API на typescript с vue-router?

Question

[Петр Сергеев]

Здравствуйте.
Проблема в том, что ts ругается на $route
ошибка звучит так
Property '$route' does not exist on type '{ layout(): any; }'.
скрин


файл где появляется ошибка

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script lang="ts">
import EmptyLayout from '@/layout/EmptyLayout.vue'
import MainLayout from '@/layout/MainLayout.vue'

export default {
  computed: {
    layout():any {
      return (this.$route.meta.layout || 'empty') + '-layout'
    }
  },
  components: {
    EmptyLayout,
    MainLayout
  }
}
</script>

файл роутера

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
    meta: {
      layout: 'empty' as string
    }
  },
  {
    path: '/categories',
    name: 'categories',
    component: () => import('../views/Categories.vue'),
    meta: {
      layout: 'main' as string
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Если использовать composition API, то все ОК:

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script lang="ts">
import EmptyLayout from '@/layout/EmptyLayout.vue'
import MainLayout from '@/layout/MainLayout.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

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

    return {
      layout: computed(() => (route.meta.layout || 'empty') + '-layout')
    }
  },
  components: {
    EmptyLayout,
    MainLayout
  }
}
</script>

Но просто интересно как использовать $route в options API. Неужели нет ршения?

Answer 1

[Aetae]

export default defineComponent({ ... })

Comments

[Петр Сергеев]

Блииин, спасибо большое, ошибок больше нет. Только все равно не совсем еще понимаю как это работает и почему так...

[Aetae]

Петр Сергеев, когда ты делаешь так:export default { ... } ты экспортируешь простой объект без типа. Это не объект Vue это просто какой-то объект. В нём нет никаких стандартных методов и вообще ничего, кроме того что ты явно в нём написал.
Функция же defineComponent принимает на вход объект конкретного типа, а потому к нему применяются все прописанные для нужных типов условия.

[Петр Сергеев]

Aetae, спасибо