ts无法识别引入的vue文件,提示找不到xxx.vue模块

https://www.jb51.net/article/262435.htm
使用链接里的方法一后,出现以下报错 :类型“typeof import("d:/threeDemo/three-demo/node_modules/vue/dist/vue")”的参数不能赋给类型“Component<any, any, any, ComputedOptions, MethodOptions>”的参数
在这里插入图片描述
.d.ts文件做以下修改

declare module "*.vue" {
    import Vue from 'vue'
    import {defineComponent} from 'vue'
    const Component:ReturnType<typeof defineComponent>
    export default Component
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 中,我们可以使用 `defineAsyncComponent` 方法来实现动态引入路由组件。同时,我们也需要在路由配置中使用 `component: defineAsyncComponent(() => import('@/views/xxx.vue'))` 的方式来指定组件。 以下是一个示例路由配置: ```typescript import { RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') // 普通的静态引入组件方式 }, { path: '/about', name: 'About', component: defineAsyncComponent(() => import('@/views/About.vue')) // 使用 defineAsyncComponent 动态引入组件 } ]; export default routes; ``` 需要注意的是,在使用 `defineAsyncComponent` 方法时,我们需要在 Vue3 的根实例的 `setup` 函数中使用 `defineAsyncComponent` 方法。例如: ```typescript import { createApp, defineAsyncComponent } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); // 在 setup 函数中使用 defineAsyncComponent app.config.globalProperties.$defineAsyncComponent = defineAsyncComponent; app.use(router).mount('#app'); ``` 在上面的示例中,我们将 `defineAsyncComponent` 方法挂载到了 Vue3 的根实例的 `globalProperties` 中,使得我们在组件中可以方便地使用。例如: ```vue <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App', async beforeRouteEnter(to, from, next) { const component = await this.$defineAsyncComponent(() => import(`@/views${to.path}.vue`)); next((vm) => { vm.component = component; }); }, data() { return { component: null, }; }, }); </script> ``` 在上面的示例中,我们在 `beforeRouteEnter` 钩子函数中动态引入组件,并将其赋值给 `component` 变量,再将其渲染到页面中。在组件中,我们可以通过 `this.$defineAsyncComponent` 来调用 `defineAsyncComponent` 方法,从而实现动态引入路由组件的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值