vue-router的4.0.0-alpha.6中的component

本文探讨了在Vue项目中使用createRouter配置路由时遇到的类型不匹配问题,特别是当尝试将通过import导入的组件直接赋值给route的component属性时。文章提供了规避此问题的方法,即使用异步组件来替代直接导入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import effect from '@/pages/effect.vue';
// effect通过import导出的方式会爆出类型不匹配,component识别出的类型为undefined
const router = createRouter({
	routes: [
      {
        path: '/',
        name: 'login',
        component: () => import('@/pages/login/login.vue')
      },
      {
        path: '/reactive',
        component: () => import('@/pages/login/reactive.vue')
      },
      {
        path: '/effect',
        component: effect
      }
    ]
})

在这里插入图片描述
通过异步组件就可以规避类型报错

{ "name": "iview-admin", "version": "2.0.0", "author": "Lison<lison16new@163.com>", "private": false, "scripts": { "dev": "vue-cli-service serve --open --mode development", "dev:prod": "vue-cli-service serve --open --mode production", "build": "vue-cli-service build", "build:dev": "vue-cli-service build --mode development", "dev-to-oss": "node deploy.js dat", "build:dev-to-oss": "vue-cli-service build --mode development && node deploy.js dat", "build:prod": "vue-cli-service build --mode production", "prod-to-oss": "node deploy.js prod", "build:prod-to-oss": "vue-cli-service build --mode production && node deploy.js prod", "oss:all": "yarn build:dev-to-oss && yarn build:prod-to-oss", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e" }, "dependencies": { "ali-oss": "^6.17.1", "axios": "^0.18.0", "clipboard": "^2.0.0", "codemirror": "^5.38.0", "countup": "^1.8.2", "cropperjs": "^1.2.2", "dayjs": "^1.7.7", "echarts": "^4.0.4", "html2canvas": "^1.0.0-alpha.12", "iview": "^3.2.2", "iview-area": "^1.5.17", "js-cookie": "^2.2.0", "simplemde": "^1.11.2", "sortablejs": "^1.7.0", "tree-table-vue": "^1.1.0", "v-org-tree": "^1.0.6", "vue": "^2.5.10", "vue-i18n": "^7.8.0", "vue-router": "^3.0.1", "vuedraggable": "^2.16.0", "vuex": "^3.0.1", "wangeditor": "^4.7.15", "xlsx": "^0.13.3" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.1", "@vue/cli-plugin-eslint": "^3.0.1", "@vue/cli-plugin-unit-mocha": "^3.0.1", "@vue/cli-service": "^3.0.1", "@vue/eslint-config-standard": "^3.0.0-beta.10", "@vue/test-utils": "^1.0.0-beta.10", "chai": "^4.1.2", "eslint-plugin-cypress": "^2.0.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lint-staged": "^6.0.0", "mockjs": "^1.0.1-beta3", "qs": "^6.6.0", "vue-template-c
04-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值