@223606322
начинающий web-разработчик

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

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

файл где появляется ошибка
<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. Неужели нет ршения?
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
Aetae
@Aetae Куратор тега TypeScript
Тлен
export default defineComponent({ ... })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы